HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

#CSS3 Animation Cheat Sheet by @AjaxshakeEs

fuente: http://www.ajaxshake.com/plugin/ES/1122/3ef87fa8/hoja-de-trucos-para-animaciones-css3-css3-animation.html

How it works

The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.

The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that’s IE 10). Using CSS3 @keyframes, you don’t have to worry about positioning the element to accomodate the animations – it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn’t trigger. Below are instructions on how to get started.

Add the animation stylesheet to the <head> element of your webpage:
<link rel="stylesheet" href="css/animations.css">

Replace css with the name of the directory where the animation stylesheet is.

Add an animation class to the element you want animated:
<div id="object" class="slideUp">

Replace slideUp with the desired animation class.

For entrance animations, you need to make them invisible by adding the visibility: hiddenproperty to the animated element:
#object{
	background-color: #fe5652;

	visibility: hidden;
}

visibility: hidden; is used to hide elements before the animation is activated.

The values for these animations are relative to the element’s size. That means bigger images have more exaggerated animations and smaller images have more subtle animations. While these animations are simple to implement, feel free to tweak values in the stylesheet to get the right effect.

Adding effects

By default, these animations will trigger when the page loads – even if the element is further down the page – but by using jQuery there are many ways you can activate the animations. See how you can use these animations on your website.

Add jQuery to the <head> element of your webpage:
http://code.jquery.com/jquery-1.10.1.min.js
Add this before the </body> tag to trigger the animation when the user scrolls to the element:

	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos 400) {
				$(this).addClass("slideUp");
			}
		});
	});

Replace #animatedElement with the ID or class of the element you want animated.

Replace slideUp with an animation class.

400 represents the space between the element and the top of the screen. The animation activates when the element is 400px from the top of the screen. Increase this number to make the animaton activate sooner.

Add this before the </body> tag to trigger the animation when the user clicks on the element:

	$('#animatedElement').click(function() {
		$(this).addClass("slideUp");
	});

Replace #animatedElement with the ID or class of the element you want animated.

Replace slideUp with an animation class.

#jQuery slide carrusel #Marquee Plugin with #CSS3 Support by @aamirafridi

Fuente: http://aamirafridi.com/jquery/jquery-marquee-plugin

Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:

jQuery plugin to scroll the text like the old traditional marquee — Read More

Latest commit to the master branch on 10-21-2014

Download as zip

 

IMPORTANT NOTE:

I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:

Examples:

Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.

Basic example with default options
HTML:

First include the plugin.

Content inside the main wrapper can have html.

CSS:
JS:
Demo:

Click the Edit button shown below to open the demo in new window.

Starting plugin with options
Using options as data attributes
Mixing data attributes and JS options

Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.

Events
CSS3 vs jQuery
Direction
Duplicated
pauseOnHover
resumeOnHover (the other way around)

Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”

Pause & Resume methods
Toggle method
Destroy method
Change marquee with ajax content

Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.

#css tutorial para expandir div con animacion y superposicion by @codrops

Fuente:  tympanus.net/codrops

Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some extra content and expanding a fullscreen overlay.

We want to show how to leverage the CSS clip property to make a smooth transition when clicking on a box element. The idea is to show some kind of overlay as if it’s actually underneath the respective element. Clicking an element will create a cut-out effect, revealing another layer that will expand.

This is how we’ll do it: we will first create a list of items that will look like metro-style boxes:

expandingoverlay1

Each one of the boxes will contain an element (overlay) that will be of position fixed. This element will actually spread over all the page but we won’t see it because the opacity will be set to 0. When we click on a box, we’ll use clip: rect() to crop the respective part of the inner fixed element. Then we will animate the clip to reveal all the width and height of the overlay which is our entire viewport:

ExpandingOverlay2

Clicking on the close button will reverse the effect and the overlay will minimize to the list item’s size and disappear.

Ir a tutorial | Ver Demo | Descargar

galeria de imagenes con animacion en html javascript ajax jquery

Galeria de imagenes con transiciones con jquery

http://nivo.dev7studios.com/

Para modificar la velocidad de transicion de las animaciones solo teneis que modificar en el archivo jquery.nivo.slider.pack.js :

– pauseTime: pausa entre una foto y otra, si poneis 1000 habra una espera de 1 segundo si poneis 10000 10 segundos

– animSpeed: velocidad de los efectos de transicion, por defecto en 500 (medio segundo de duracion de la animacion)

jQuery: Scroll animado hasta un anclaje by webintenta

Fuente: http://webintenta.com/jquery-scroll-animado-hasta-un-anclaje.html

La siguiente función permite crear un agradable efecto de scroll para desplazarse hasta un anclaje. Tan sólo hay que añadir la clase “toplink”.

$("a.toplink").click(function() {
	$("html, body").animate({
		scrollTop: $($(this).attr("href")).offset().top + "px"
	}, {
		duration: 1000,
		easing: "swing"
	});
	return false;
});

Ver ejemplo en funcionamiento » »
Visto en snipplr » »