Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

 <marquee>
        <div class="client">
           <img src="images/c1.png"/>
        </div>
         <div class="client">
           <img src="images/c2.png"/>
        </div>
         <div class="client">
           <img src="images/c3.png"/>
        </div>
         <div class="client">
           <img src="images/c4.png"/>
        </div>
        <div class="client">
           <img src="images/c5.png"/>
        </div
        ><div class="client">
           <img src="images/c6.png"/>
        </div
        ><div class="client">
           <img src="images/c7.png"/>
        </div>

       </marquee>

I tried using CSS keyframes to scroll these images without the HTML marquee tag, but it didn't give me the desired result. These client logos are located at the bottom of the index page and should scroll from left to right or right to left. Is there an alternative method I can use to achieve this effect? Thank you in advance for any help.

javascriptjqueryhtmlcss

Answer №1

/* To download the .js file needed for this project, visit the following link */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js


<head> 
      <script src="assets/js/crawler.js" type="text/javascript" ></script>
 </head>

 /* Don't forget to add an ID to your div tag */
<div id="marquee">
        <div class="client">
           <img src="images/c1.png"/>
        </div>
         <div class="client">
           <img src="images/c2.png"/>
        </div>
         <div class="client">
           <img src="images/c3.png"/>
        </div>
         <div class="client">
           <img src="images/c4.png"/>
        </div>
        <div class="client">
           <img src="images/c5.png"/>
        </div
        ><div class="client">
           <img src="images/c6.png"/>
        </div
        ><div class="client">
           <img src="images/c7.png"/>
        </div>
</div>

/* Place this script in the head section of your project */
marqueeInit({
                   uniqueid: 'marquee',
                   style: {

                   },
                   inc: 5, // Speed - pixel increment for each iteration of movement
                   mouse: 'cursor driven', // Mouseover behavior ('pause' 'cursor driven' or false)
                   moveatleast: 2, 
                   neutral: 150,
                   savedirection: true,
                   random: true
                });

Answer №2

Here is a unique suggestion for you to try:

<style type="text/css>
/* Create a marquee effect */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}

/* Define the movement of the marquee */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

/* Add some visual appeal */
.microsoft {
    padding-left: 1.5em;
    position: relative;
    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* Customize the appearance with shadows and gradients */
.microsoft:before, .microsoft::before {
    z-index: 2;
    content: '';
    position: absolute;
    top: -1em; left: -1em;
    width: .5em; height: .5em;
    box-shadow: 1.0em 1.25em 0 #F65314,
                1.6em 1.25em 0 #7CBB00,
                1.0em 1.85em 0 #00A1F1,
                1.6em 1.85em 0 #FFBB00;
}

.microsoft:after, .microsoft::after {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;
    background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}

/* Style the links */
.vanity {
    color: #333;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
    color: #1570A6;
    transition: color .5s;
    text-decoration: none;
}

.vanity a:hover, .microsoft a:hover {
    color: #F65314;
}

/* Toggle button styling */
.toggle {
    display: block;
    margin: 2em auto;
}

</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg"  /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
    $(".marquee").toggleClass("microsoft");
});
</script>

http://jsfiddle.net/jonathansampson/XxUXD/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Observable<void> fails to trigger the subscriber

I am currently facing a challenge with implementing a unit test for an Observable in order to signal the completion of a process. While there is no asynchronous code in the logout function yet, I plan to include it once the full logic is implemented. The m ...

javascriptangulartypescriptunit-testingobservable

Adjusting text size in iOS7 when converting HTML to NSAttributedString

My UITextView is currently handling an NSAttributedString that was initially entered using the keyboard. I save this attributed string as HTML, and it looks fine. However, when I load it again and convert it back to an attributed string from the HTML, the ...

htmlfontsios7nsattributedstring

What is the best way to compile TypeScript files without them being dependent on each other?

I have created a TypeScript class file with the following code: class SampleClass { public load(): void { console.log('loaded'); } } Now, I also have another TypeScript file which contains functions that need to utilize this class: // ...

javascripttypescriptvisual-studio

Exclusive Hover Effect: Applying Hover Styles Only to Child Elements, Independent from Parent Hover

Styling with components is a great way to enhance your web design. const box = style.div` background-color: blue height: 300px ` const image = style.img` filter: grayscale(50%) ` <box> <image /> </box> If <image> stands alo ...

cssstyled-components

How can I make the outer function in AJAX's onreadystatechange function return 'true'?

Within my Javascript/AJAX function below, I am striving for a return of true or false: function submitValidate() { var xmlhttp; xmlhttp = null; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari try { xmlhttp ...

javascriptajax

Enhancing image search functionality through dynamic HTML updates

I need help figuring out how to update the link address for profile pictures on my NHL stats website. Currently, I am using a script to append the image to the body, but I don't know how to properly add the player ID ({{p1_ID}}) to the link and includ ...

javascripthtmlimage

Pagination functionality in TablePress allows for improved organization and

Currently, I am utilizing the TablePress plugin on my WordPress website and I am aiming to achieve a pagination layout similar to this illustration: . How can I modify the pagination to display the text 'page 1 of X' instead of 'previous&apo ...

htmlcsswordpressdatatable

Transforming an array of HashMaps into a JSON object within a servlet and showcasing it on a JSP page

Looking to extract all table rows and store them in an array of hashmaps, then convert them into a JSON object to be sent to a JSP page using Ajax and jQuery. Struggling with displaying the content on the JSP page. I've written the code below but need ...

javajavascriptjqueryjsonjsp

Develop a novel function

I am working on a new Order page where users can select a category, then a service, and fill out the quantity field for their order. I have an idea to create a function using @if and @else statements. In this function, I want to display the quantity fiel ...

javascriptphphtmllaravel

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

javascriptangularlocal-storageangular2-services

How to refine a schema by applying filters from another schema

I am working with 2 different Schemas const mongoose = require('mongoose'); const Schema = mongoose.Schema; const {ObjectId} = mongoose.Schema; const matchList = new Schema({ user:[{ type: ObjectId, ref:'User' } ...

javascriptnode.jsmongodbexpressmongoose

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

phphtmlcss

Advancing the utilization of custom Angular input fields

I've developed a unique Angular input element that utilizes a textarea as its primary input field. Is there a way for me to pass along the enter key event to the main form? ...

javascriptangular

Error encountered during webpack development build due to syntax issues

Having trouble building a project with webpack due to persistent syntax errors? It seems like when your friend runs the same code on Linux (while you're working on Windows 10), everything works fine without any errors. Here is the configuration for m ...

javascriptnode.jswindowsnpmwebpack

Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...

cssfontsfont-face

Guide: Implementing Vuex store within a plugin

I recently developed a custom Vue plugin which includes a customized instance method import Echo from 'laravel-echo'; import Vue from 'vue'; import config from '@/config'; const echor = { install(Vue){ Vue.prototy ...

javascriptvue.jsvuejs2vuex

Firefox compatibility issue: Bootstrap modal button not functioning properly when wrapping other HTML elements

Hey everyone, I've come up with some awesome image hover effects that you can use. I've implemented bootstrap modals so that when you click on 'show code', a pop-up will display with the HTML and CSS codes for easy copy-pasting. However ...

htmlcsstwitter-bootstrap

Utilizing AngularJS and RequireJS to incorporate a controller into the view

I am facing an issue while trying to add an Angular controller to my HTML view. Typically, in Angular, this can be done using: ng-controller="<controller>". However, due to my use of RequireJS, I have had to implement it differently. I need to includ ...

javascriptangularjscontrollerrequirejs

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

htmlcssmenu