How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Center the website Give the header a height and a background image Style and position the text within the header Create a shadow overlay Give basic style to the header and navigation bar. Here is the CSS: The jQuery Here is the jQuery:
Mural.ly Opens Its Web-Based Creative Collaboration Platform To The Public Buenos Aires-based startup Mural.ly opened its doors to the public today, delivering a new way to collect, share and brainstorm on the web. The tool mixes a little bit of Evernote with a whole lot of Prezi, but rather than feel derivative, it instead seems like the next natural step in the ongoing evolution of how we not only think about, but share and collaborate on ideas together online. Mural.ly is also announcing a seed round of $775,000 alongside its public launch, provided by Intel Capital, Alta Ventures, 500 Startups and a number of other investors. What Mural.ly offers is a new way to collect and share ideas that gets away from the traditional, page-based way of looking at things. Creativity is something Battan is very familiar with, having previously founded startup gaming company Three Melons, later acquired by Playdom, which itself went on to be acquired by Disney as part of its interactive department.
How to Make an Impressive Animated Landscape Header with jQuery Content doesn’t always have to stay visible. Sometimes it can hide in the most unexpected locations. In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery. This is going to be a big undertaking. I’ll warn you now, there will be a lot of code to copy and paste. I will cover the essentials in the main tutorial, but in the interest of space I will not do a line by line analysis. The Goal – Green Cartoon Hills Before we start, let’s take a look at the end result. Step 1 – Get Your Files Organized Just so we’re all on the same page throughout the tutorial, here’s a screenshot of my project file structure: As you can see, you’ll need to make three main files for the CSS, jQuery, and XHTML respectively. You’ll also want to make a directory for Javascript plugins, and another for images. IE6 Disclaimer – Many of the project images above use the PNG format in order to have cleaner transparency. Google+
webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Dynamic PNG shadow position & opacity with jQuery - by Daniel Kurdoghlian | PushingPixels.at Below you can see the magic interesting part of my script: This is, what makes the correct positioning of the shadow <div>. Just assign this function to a dragging event (+ window-resize & load) and you have your dynamic positioning. A jQuery responsive images plugin to help ease the transition | Jquery Picture Dynamic Page | Home Pellentesque habitant morbi tristique senectus et netus et malesuada. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Code a Responsive Navigation Menu Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design. Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects. What We’re Building If you’re the kind of person who likes to skip ahead, here’s a sneak peek at what we’re building. Demo: Click here to see and tweak it on Dabblet. The HTML Let’s jump right into this project without a bunch of unnecessary fluff. The first step is to decide on some markup. Believe it or not, this one little piece of code had my head spinning when it came time to test. Fortunately, the fix is easy, just drop in the famous html5shiv and you’re good to go (place this in the head portion of your document). Add the List Add The Sub Tag Progress Check Starter Styles Container Styles Border Fix
jQuery Masonry TodoMVC