background preloader

Nikebetterworld Parallax Effect Demo

Nikebetterworld Parallax Effect Demo
A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level. In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld. If you’d like to see what we’ll be creating, go check out the demo or download the files. The HTML Our page will consist of 6 sections: header, footer and 4 articles. To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. We also need to initiate the localScroll function on the unordered list of article links that are fixed to the right of the page. Inside of our body tag, we begin with the unordered list that provides a quick link to each section. Related:  parallaxcssHTML desing

One page website Once in a while, something new shows up that has the power to shake the world and stimulate all people to keep moving instead of stay still, this quote applies for practically every instance in life and business. A while ago, Nike released an astonishing website named “Nike Better World” to support all the athletes around the world; the design itself was brilliant and it generated a lot of positive reviews, but the real breakthrough came thanks to the navigation system that these guys made, a fantastic vertical Parallax system. On this tutorial we’re going to undress the structure of this website and then we’re going to create something inspired by Nike’s website using jQuery and CSS. View Demo Download Source This tutorial is a practical exercise, created with the only intention of explore the functionality behind the “Nike Better World” website, all the credits belong entirely to Nike. How does it work? Understanding the “Nike” effect Step 1: Insert the HTML Step 2: Working with jQuery

Freebies Archives - Ideagrafika Projektowanie infografik – cz. II (21 darmowych zestawów wektorowych) Poznaliśmy już podstawowe narzędzia do tworzenia infografiki. Prezentowanie danych jest o wiele łatwiejsze, kiedy możemy budować infografikę z gotowych elementów. Trzy świeże mockupy, które zawsze warto mieć pod ręką Ile zdziałać może dobry mockup nikogo nie trzeba chyba przekonywać. Darmowe audiobooki na Spotify – jak je znaleźć? Kiedyś podczas pracy słuchałem głównie internetowego radia, potem przerzuciłem się na ulubioną muzykę w Spotify. Pexels – ponad 800 darmowych zdjęć na bloga i nie tylko Jakiś czas temu przestawiłem wam listę miejsc w których można pobrać darmowe zdjęcia w wysokiej jakości do komercyjnego wykorzystania – na przykład na blogu. 17 darmowych mockupów, które odmienią Twój projekt – cz. Nikogo nie trzeba chyba przekonywać, że sposób prezentacji projektu klientowi jest niemal tak samo ważny jak sam projekt. KLITSCHKO vs.

scrolldeck.js Build a web page with each slide as a div. Pro-Tip: Use rem’s to make content scale (resize this window to see) Create section navigation by linking to slide id’s (optional) After linking all the required scripts (jQuery, Scrollorama, scrollTo, easing & scrolldeck), create the slide deck on document ready event. $(document).ready(function() { var deck = new $.scrolldeck(); }); You can configure the settings as follows(example has the default config values assigned) Add animations to slides by adding the "animate-in" or "animate-build" classes to elements in your slides. <div class="slide"><p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left. Available animations are "fly-in-left", "fly-in-right", "space-in" and the default which is "fade-in"

CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!

Build a parallax scrolling website interface with jQuery and CSS - Jonathan Nicol Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS. Parallax what? Even if you’re not familiar with the term “parallax scrolling” you will certainly be familiar with the technique. Parallax scrolling is a 2d animation process that creates an illusion of depth by animating foreground layers faster than background layers. Demo and Download My demo web page shows one approach to building a vertical parallax scrolling interface: View demoDownload source You can scroll in the usual fashion, use the navigation menu at the right-hand side of the page, or the next/prev buttons that appear underneath each article. The scrolling looks smoothest in Safari (at least that’s the case on my PC), but my demo should work in any modern browser. Disclaimer 2: The navigation menu in my demo is inspired by the menu on the Nike Better World website. How it works

101 Great Parallax Websites | Potent Pages Parallax websites are an exciting and relatively new trend in website design. These websites move layers of the website at different speeds, creating interesting transitions and a 3-dimensional effect. As viewers scroll down, parallax websites become animated. Giving visitors control of the animation creates an interactive, engaging experience. We compiled a list of 101 great examples of parallax website design. Looking for more websites? Wildlife is a design and videography company. Head2Heart Head 2 Heart is a non-profit website seeking donations to build a platform to collect donations for other non-profits. Dangers of Fracking Dangers of Fracking explains the environmental restults of hydraulic fracturing. Bake Agency Bake Agency is a graphic design company. L'Unita L'Unita is an Italian oysteria and wine bar located in Toronto, ON, CA. Carlos Molina Carlos Molina is a photographer and web developer located in Santiago Chile. Madwell Design Agency 5 Jobs at Octave & Octave aiia

CSS Puns & CSS Jokes ~ Curated by Saijo George Having trouble with these CSS Puns? Why not brush up on your CSS skills with these easy to follow CSS courses from Code School,Treehouse,Tuts+,Udacity, or Codecademy. Thanks to Codrops for the wobbly slideshow effect tutorial, prism.js for the epic syntax highlighter and KL-Webmedia from Envato Studio for most of the graphics.You might also want to check out CSSHumor on Twitter for some daily dose of CSS Puns. scrollorama Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested. Design and build your site, dividing your content into blocks. Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter. Target an element and animate its properties. The animation parameters you can use are: Hook into the onBlockChange event. scrollorama.onBlockChange(function() { alert('You just scrolled to block#'+scrollorama.blockIndex); }); Note: If you are not using the pinning feature, it is recommended you disable it.

Zoom sur l'effet parallaxe Après avoir abordé les arrière-plans extensibles (full background) nous allons continuer avec l'effet parallaxe. Cet effet graphique étant facile à comprendre et à mettre en place, vous allez pouvoir créer rapidement un site original. Ce tutoriel va utiliser jQuery ainsi que le plug-in jQuery-Parallax. Qu'est-ce que l'effet parallaxe ? Il s'agit d'un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Des exemples Utilisant le positionnement de la souris Utilisant le niveau du scroll driver-club Principe et théorie Grâce à l'utilisation de JavaScript, il est possible de déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll). Illustration pour le scroll Avec une même distance de scroll, l'élément a aura parcouru une distance plus faible que l'élément b. Illustration pour le positionnement de la souris En pratique Démonstration

As melhores técnicas e exemplos do efeito parallax | Lado Design O que é o efeito parallax? Utilizado principalmente em sites de uma única página, o parallax é uma técnica que causa uma ilusão de profundidade nas interfaces. Imagine o seguinte cenário: você está viajando de carro para o litoral e ao olhar pela janela você avista o mar, lá longe. Mas, ao prestar atenção na paisagem você percebe que as árvores que estão mais próximas de você, no acostamento da pista, se movem mais rápidas que as montanhas localizadas próximas ao mar. É justamente esse o efeito parallax: mover o fundo em uma velocidade mais lenta do que as imagens de primeiro plano, como explicado no site UX Design. Deste modo, ao sobrepor várias imagens em um site e movimentá-las em diferentes velocidades – conforme a rolagem da página – causamos esse interessante efeito de profundidade, deixando nossas interfaces mais modernas e fascinantes. Como criar o efeito parallax? A utilização do jQuery com HTML5 e CSS3 mostra que empregar essa técnica pode ser mais fácil do que parece.

A Simple Parallax Scrolling Technique Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in! This technique revolves around controlling the speed of background image. I am using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. According to the specification for Custom Data Attributes, any attribute that starts with data- will be treated as a storage area for private data. Since all we need to do is control the speed of the background images, we'll use data-type="background" and data-speed="10" as key attributes to specify the necessary parameters. Now it should look like this...

How to Create (Animated) Text Fills A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. View demo Download source I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill! About a year ago the article Techniques for creating textured text by Sara Soueidan was published here on Codrops. I’m very interested in this topic but from a different perspective. In this article I’m going to share my experiments and five ways to create patterned filled text. For each of the techniques I’ll show the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental). I will not include all the code here, only the most important parts, but you can find everything inside the download files and play with it. Let’s begin. Yes

Related:  JavascriptTutorials