Scrollex

Developer
Sleezyjus
Size
2,092 Kb
Views
36,432
  1. Scrollex Previews
  2. Scrollex HTML Codes
  3. Scrollex CSS Codes
  4. Scrollex JS Codes

How do I make an scrollex?

What is a scrollex? How do you make a scrollex? This script and codes were developed by Sleezyjus on 10 September 2022, Saturday.

Scrollex Previews
IQ Test

Scrollex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>scrollex</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content">
<div class="scrolls"> <div class="content1"><img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img> <img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img> <img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img>
<img src="https://i.ytimg.com/vi/Fa_lw05TppE/maxresdefault.jpg"></img> </div>
</div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scrollex - Script Codes CSS Codes

img{ display:inline-block; padding:2%; width:100%; opacity:0.5; max-width:300px;
}
.scrolls { height:250px; background:000; overflow-x:hidden; overflow-y:hidden; white-space:nowrap;
}
.content { margin:0 auto; width:100%; height:200px;
}

Scrollex - Script Codes JS Codes

$(document).ready(function() { var $div = $('.scrolls'); var sL = 4000; var startTime = new Date().valueOf(); var timePassed; var stopped = false; //animate: $div.animate({ scrollLeft : sL },100000, 'linear'); //on click, stop animation: $div.on("click",function(){ $div.stop(true,false); stopped = true; }); //on mouseover -> stop animation (pause) //on mouseout -> resume animation (actually a new animation $div.hover(function() { //mouseenter $div.stop(true, false); timePassed = (new Date()).valueOf() - startTime; }, function() { //mouseleave if (!stopped) { //resume only if it was stopped on mouse enter, not on click $div.animate({ scrollLeft : sL }, 100000 - timePassed, 'linear'); } });
});
Scrollex - Script Codes
Scrollex - Script Codes
Home Page Home
Developer Sleezyjus
Username sleezyjus
Uploaded September 10, 2022
Rating 3
Size 2,092 Kb
Views 36,432
Do you need developer help for Scrollex?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sleezyjus (sleezyjus) Script Codes
Name
Feel my color
Drag to pan image
Halves
Switching colors menu
Jusmenu
Rub it
Simple css animate
Simple Lightbox with Video or Image
Slidein the dm
Ageverify
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!