SimpleBar - Custom scrollbars made simple. [be]lazy.js | A lazy loading and multi-serving image script. What is bLazy? bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. Verlok/lazyload: LazyLoad is a fast, lightweight and flexible script to allow you enhance performance on your website by loading images only as they enter (or are about to enter) the viewport or a scrollable area, with best support to the img src.
Basic installation That would look pretty much like this: Reveal.js - The HTML Presentation Framework. The HTML Presentation Framework Created by Hakim El Hattab and contributors Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical Slides Slides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide.
Basement Level 2 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Markdown support Write content using inline or external Markdown. <section data-markdown> ## Markdown support Write content using inline or external Markdown. Fragments Hit the next arrow... ... to step through ... ... a fragmented slide. Fragment Styles grow shrink fade-out current-visible. Www.elevateweb.co.uk/image-zoom. Animo.js • Labs by Big Room Studios. How to create an animated sticky header, with CSS3 and jQuery. Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that’s popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then maintain their presence on the page somehow.
The trend started with sidebars, but where it’s really grown in popularity is headers. Why? Because headers tend to contain navigation, and persistent navigation is popular with users. In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.
Here’s what it’s going to look like when we’re done: If you’d like to follow along with the code, you can download it here. The HTML The HTML for our example is really simple, all we need is an h1 inside a header. <header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> The jQuery. Elastislide - A Responsive jQuery Carousel Plugin. Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size.
See "Why GSAP? " to learn why it's used by 6,500,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. We promise it's worth your time. Quick links We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does...
GSAP as a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. DOM, SVG, <canvas>, and beyond What's GSAP Exactly? Loading GSAP Banner Ad CDNs Downloading GSAP. Turn.js: The page flip effect in HTML5.
10 handy jQuery mobile tips and snippets to get you started. As with any new technology, getting started is often the hardest part. With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library. Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome. Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful. 1. A full basic page I find myself needing the full mark-up for a basic page over and over again. <! 2. When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was triggered.
As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. 3. 4. For list items: 5. 6. 7. jQuery Fundamentals. Slick - the last carousel you'll ever need. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.
Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:
Home V1 w/Revolution Slider - Quantum. Simple jQuery Accordion – Norman's Blog. Wie macht man eigentlich.. Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine. Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich.
You Don't Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps.