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

Gatsby Dazzling Graphic

I'm currently facing an issue with my Heroes component. const UniqueHero = styled.div` display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${prop ...

javascriptreactjsimagegatsbyresponsive-images

What is the mechanism by which nodes handle multiple requests simultaneously?

Lately, I've delved into the world of NodeJs, trying to grasp how it handles multiple concurrent requests. It's fascinating that NodeJs operates on a single-threaded event loop architecture, where only one statement executes at a time on the main ...

javascriptnode.jsasynchronousconcurrencyevent-log

Dear C# Tag Builder, I am looking for a way to add an attribute without a value in order

Attempting to create input checkbox HTML using Tag Builder in C#, ran into an issue trying to include the disabled field. The attribute doesn't allow null or empty values, so how can an attribute be added without a value? var builder = new TagBuilder ...

c#htmltagbuilder

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

Is JavaScript Promise Chaining Allowed?

I have a question regarding my code, despite it currently functioning correctly. Specifically, I'm wondering if the sequence of promises in my database is valid. Promise 1 must be fulfilled before moving on to Promise 2 because I rely on the data and ...

javascriptnode.jspostgresqlexpress

Uncovering the secrets: accessing hidden folder files in react-native-fs

I am encountering a problem when trying to access files from a hidden folder /WhatsApp/Media/.Statuses in react-native-fs. Despite granting the READ_EXTERNAL_STORAGE permission on Android, I only receive an empty array when attempting to access it using th ...

javascriptreactjsreact-nativereact-native-fs

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

javascriptjqueryhtmlkeypresskeydown

Unable to transfer bootstrap form data from the view to the controller due to issues with bootstrap validations

Scenario I have integrated a bootstrap form into my codeigniter application with bootstrap validation to ensure data accuracy. I want the submit button to work properly so that users can successfully submit the form and be redirected to the action page ...

javascriptphpjquerytwitter-bootstrapcodeigniter

Customize hover effects in tailwind css with dynamic values

I am trying to customize the text color on hover based on different category names using tailwind CSS. In my configuration, I have assigned a specific color code for each category like this : tailwind.config.js theme: { extend: { } }, co ...

javascriptcssnext.jshovertailwind-css

What steps should I take to modify the API addresses within the React project build?

In my React project, I am looking for a method to dynamically change the API addresses after building it. Is there a way to accomplish this without using environment variables? I want to be able to modify the API address even after the build process is c ...

javascriptnode.jsreactjs

An async function cannot be used as a Constructor

I am in the process of creating a constructor function using JavaScript. This constructor needs to be asynchronous because I am utilizing the Phantom JS module for data scraping. As a result, an asynchronous function must be used to scrape data through Pha ...

javascriptnode.jsphantomjs

Tips for establishing and connecting numerous connections among current nodes using the same criteria

While browsing StackOverflow, I came across similar questions. However, I believe this one has a unique twist. The main issue at hand is: How can I establish multiple relationships between existing nodes? I have the following code snippet: session . ...

javascriptnode.jsmongodbneo4jcypher

Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

Can someone please assist me with this issue? When I choose Business/Corporate from the dropdown menu, the table row becomes visible as expected. However, when I switch back to Residential/Consumer, the row does not hide. My goal is to only display the row ...

javascript

Implementing the jquery mobile data-native-menu feature in a select element dynamically generated from jeditable

Greetings! I have encountered an issue where the data-native-menu="false" instruction works correctly when directly placed in a select element, but doesn't work when added to a select generated by JavaScript (using the Jeditable plugin). You can view ...

javascriptjqueryjeditable

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

javascriptreactjsnext.js

PHP - contact form is live for just 2 hours daily

Hello, this is my first time here and I could really use some assistance. Please bear with me as English is not my strong suit compared to most people here, but I'll do my best to explain my query. So, I have a PHP script for a contact form on my web ...

javascriptphphtml

Attempting to incorporate an audio file into a Discord.js module

My bot can join the voice channel successfully, but when I attempt to play audio, I encounter multiple errors indicating that I am missing certain modules [@discordjs/opus, node-opus, opusscript]. Although I have installed these modules, I am unsure of w ...

javascriptnpmdiscord.jsmp3opus

How can I remove the outline when focusing with the mouse, but still retain it when focusing with the

Is there a way in JavaScript to detect if an element received focus from the keyboard or mouse? I only want the outline to show when it's via the keyboard, not the mouse. If this is possible, how can I override the browser's default outlining be ...

javascriptjqueryhtmlcss

Javascript initial keypress delay for movement in 3D space

I am aiming for a seamless movement experience when pressing a key - with the object initiating its movement upon the first press and then continuously moving while the button is held down. //setting movement speeds var xSpeed = 0.5; var zSpeed = 0.5; do ...

javascriptthree.jskeycodegltf

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader