LiScroll 1.0 fluid
How do I make an liscroll 1.0 fluid?
What is a liscroll 1.0 fluid? How do you make a liscroll 1.0 fluid? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.
LiScroll 1.0 fluid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>liScroll 1.0 fluid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ol class="blogsitesummary"> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li> <li><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span><a href="#">Read More >></a></li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
LiScroll 1.0 fluid - Script Codes CSS Codes
/* liScroll styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
.tickercontainer { width: 100%; margin: 0; padding: 0;
}
.tickercontainer .mask { position: relative; background-color: #efefef; padding: 15px 0; width: 100%; overflow: hidden; display: block;
}
ol.blogsitesummary { position: relative; width: 100%; list-style-type: none; margin: 0; padding: 0;
}
ol.blogsitesummary li { float: left; margin: 0; padding: 0; font-size: 1.1em; font-family: 'Open Sans', sans-serif; color: #222;
}
ol.blogsitesummary li a { white-space: nowrap; padding: 0; margin: 0 30px 0 0; color: #BADA55; text-decoration: none; font-style: oblique;
}
ol.blogsitesummary li a:hover { color: darken #BADA55, 20%;
}
ol.blogsitesummary li span { margin: 0 10px 0 0; font-weight: 700;
}
LiScroll 1.0 fluid - Script Codes JS Codes
/*! * liScroll 1.0 * Examples and documentation at: * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html * 2007-2010 Gian Carlo Mingati * Version: 1.0.2.1 (22-APRIL-2011) * Dual licensed under the MIT and GPL licenses: * https://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * Requires: * jQuery v1.2.x or later * */
jQuery.fn.liScroll = function(settings) { settings = jQuery.extend({ travelocity: 0.07 }, settings); return this.each(function() { var $strip = jQuery(this); $strip.addClass("newsticker") var stripWidth = 1; $strip.find("li").each(function(i) { stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi }); var $mask = $strip.wrap("<div class='mask'></div>"); var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>"); var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width $strip.width(stripWidth); var totalTravel = stripWidth + containerWidth; var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye function scrollnews(spazio, tempo) { $strip.animate({ left: '-=' + spazio }, tempo, "linear", function() { $strip.css("left", containerWidth); scrollnews(totalTravel, defTiming); }); } scrollnews(totalTravel, defTiming); $strip.hover(function() { jQuery(this).stop(); }, function() { var offset = jQuery(this).offset(); var residualSpace = offset.left + stripWidth; var residualTime = residualSpace / settings.travelocity; scrollnews(residualSpace, residualTime); }); });
};
$("ul#ticker01").liScroll({travelocity: 0.05});
Developer | Peter Appleyard |
Username | whodaman |
Uploaded | October 06, 2022 |
Rating | 3 |
Size | 3,374 Kb |
Views | 30,360 |
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!
Name | Size |
Jquery.slimmenu.js testing | 5,054 Kb |
Show and hide, based on webapp id business catalyst | 4,046 Kb |
Function for responsively loading carousel items with Cycle2 | 3,143 Kb |
Simple SCSS Dropdown Nav | 5,329 Kb |
Navigation Play | 8,636 Kb |
Fox layout, floated grid | 3,707 Kb |
Datepicker input for businesscatalyst, with age limitation | 26,706 Kb |
Google Charts | 3,578 Kb |
Waypoints Menu Colour Change | 12,183 Kb |
A Pen by Peter Appleyard | 15,429 Kb |
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!
Name | Username | Size |
Realistic Buttons | Stoypenny | 2,248 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
A Pen by Dalton Liu | Liudalton | 12,437 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Fading text with CSS blend modes | Giana | 3,305 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!