background preloader

Create a Funky Parallax Background Effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog. Tutorial Details Last year, the Silverback App site, designed by Carsonified, created some chatter amongst the design community for its clever use of a parallax scrolling effect seen when resizing the browser window. Like in old 2D platformers like Sonic the Hedgehog, this parallax effect could really come into its own alongside some horizontally scrolling content. This can be easily achieved using a little jQuery magic! Step 1 – The Skeleton HTML First, we need to create the basic HTML structure we’ll be using. <div id="header"><h1 id="logo">Scrolling Clouds</h1><ul id="menu"><li><a href="#box1" class="link">Home</a></li><li><a href="#box2" class="link">Box 2</a></li><li><a href="#box3" class="link">Box 3</a></li><li><a href="#box4" class="link">Box 4</a></li></ul></div><! Step 2 – Some CSS

Jquery ASCENSOR Copyright (c) 2013 léo galley Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

Parallax Scrolling! - CSS-Tricks # August 24, 2011 at 5:40 pm Seriously took it about a minute to load. It looks great though, I’d suggest looking into jQuery Easing ( to allow for a bit smoother scrolling and such. Possibly Drag Dealer ( as well to make the page grab-able and more interactive (having to use the middle mount/scrollbar is always a pain and takes away from the glory that is parallax). In a nutshell.. make it load quicker, implement easing to make it less sketchy when scrolling, and make it more interactive by being drag-able and such. EDIT: Boy I feel silly, I thought that site was yours! While I know very little about it, I know of the components you need to run it. The problem with most parallax websites, like Mark’s website, is that they take FOREVER to load. Here is a very simple parallax effect tutorial that you can build off of and learn from:

lorempixel - placeholder images for every case Create Your Own Trendy Parallax Website Layout Advertisement Introduction Apart form the pinterest dynamic fluid layout and big background image layout, parallax layout is still one of the trend in web design simply because it's a great technique to showcase product/service through an automated presentation by using scrolling. Take Minicooper Japan as an example, when user scrolls down the website, each slide introduces the car features with seamless, perfectly timed animations which is a really great user experience. In this post, we have a few of javascript plugins that are able to achieve pretty impressive parallax animations. To spice up your inspiration, we also gathered 10 great examples that implemented parallax scrolling to its full potential. Parallax Javascript Plugins It's not easy to make a parallax layout, because parallax layputs usually contain a lot of subtle animations and you really need to plan ahead for this. Sequence JS Sequence is the jQuery slider plugin with infinite style. Inspirations

REALIZZARE UN MECCANISMO DI LOGIN IN PHP SENZA DATABASE :Andrea Pra Levis Salve, qualche giorno fa un mio amico mi aveva chiesto una mano per realizzare un semplice script per permettere di controllare l’utenza sul proprio sito. Terminato lo script mi sembrava utile condividerlo con chi ne avesse bisogno; i nostro obiettivi sono semplici: 1. realizzare una piccola form per permettere all’utente di loggarsi 2.creare uno script per il controllo delle credenziali 3. realizzare uno script da incollare in ogni pagina per il controllo delle credenziali Form di Login Il primo è presto fatto: non facciamo altro che aprire un file con estensione php e incollare questo codice: <html> <head> <title>Login Area</title> </head><body> <? Controllo credenziali Singolo Utente:Apriamo un file con estensione php e inseriamo questo codice php, ricordandoci di salvarlo come login2.php o comunque con lo stesso nome dell’attributo method: Prima di tutto creiamo una sessione con session_start() e salviamo in due variabili php lo user e la password necessari per accedere al sito. Andrea

Build a parallax scrolling website: 10 pro tips | Web design The term 'parallax' refers to the apparent movement of objects when viewed from different positions. The technique was originally used in 2D video games where background images moved slower than foreground images, creating an illusion of depth. Who would have thought something popularized in 1982 arcade game Moon Patrol would become a major trend for web design 30 years later! Parallax websites have come a long way since the simple two-layered site. With HTML5, CSS3 and modern browsers, there are many parallax sites that use multiplane animation, introduce new elements and create motion beyond the y-axis using scrolling. Creating one of these visually interactive masterpieces can be overwhelming, so here are 10 tips that will help you build your parallax scrolling websites in the right way. 01. It is no surprise that with the increase of internet usage via mobile devices, that design concepts such mobile first and responsive web design have become highly popular. 02. 03. 04. 05. 06. 07.

[PILLOLA] Login più sicuro con JavaScript e PHP Pre - premessa Questa pillola è l' evoluzione al contrario di un' altra mancata pillola che sfruttava un modo di interagire client -> server più moderno. Il perchè di questo passo in dietro è dato dalla non totale compatibilità crossbrowser con versioni vecchie o non aggiornate di alcuni browsers ( IE4 , Opera7 , 8 mesi fa Konqueror ... altre ) . Per chi fosse interessato all' eventuale metodo alternativo basato su ajax può visitare questa pagina: . Premessa Quando non siamo su una connessione protetta parlare di un login sicuro é praticamente inutile. Perche' JavaScript Lo scopo e' quello di filtrare ancora prima di inviare le info al server i dati sensibili dell' utente e di non permettergli di salvare la password. Di cosa abbiamo bisogno lato client ? A questo punto potete già leggervi il file Login.js il quale é commentato appositamente per capire quale é la procedura e come va sfruttata. <? <?

Graphic Design Courses & Classes – London & Manchester | Shillington College UK

Related: