Archiwum tagu: animacje w jQuery

Animacje w jQuery/plugin InnerFade

InnerFade to mała wtyczka do jQuery JavaScript Library. Dzięki niej stworzysz własny pasek najnowszych wiadomości, czy animacji, np. pokaz swojego portfolio lub blok reklamowy na Twoją stronę. Elementy mogą być dowolne, np. zdjęcia, listy, artykuły, DIV.

To bardzo łatwe :) Zobacz jak działa :)

HTML

$('ID or class of the element containing the fading objects')
                                                   .innerfade({
animationtype: Type of animation 'fade' or 'slide'
               (Default: 'fade'),
speed: Fadingspeed in milliseconds or keywords
       (slow, normal or fast)(Default: 'normal'),
timeout: Time between the fades in milliseconds
         (Default: '2000'),
type: Type of slideshow: 'sequence', 'random'
      or 'random_start' (Default: 'sequence'),
containerheight: Height of the containing element
                 in any css-height-value (Default: 'auto')
runningclass: CSS-Class which the container
              get’s applied (Default: 'innerfade')
});


<script type="text/javascript">
	$(document).ready(
		function(){
			$('#news').innerfade({
				animationtype: 'slide',
				speed: 750,
				timeout: 2000,
				type: 'random',
				containerheight: '1em'
			});

			$('#portfolio').innerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '220px'
			});

			$('.fade').innerfade({
				speed: 'slow',
				timeout: 1000,
				type: 'sequence',
				containerheight: '1.5em'
			});
		}
	);
</script>

DOWNLOAD

jquery.innerfade.zip (124kb)

źródło: medienfreunde.com


Menu obraz w jQuery

Witam wszystkich w Nowym Roku!

A jak Nowy Rok to nowa dawka porad z zakresu jQuery. Dzisiaj przedstawię prosty sposób na obrazowe menu w jQuery.

jquery_8

ZOBACZ DEMO

Zacznijmy od kodu HTML,

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>

Do tego oczywiście CSS:

.jimgMenu {
        position: relative;
        width: 670px;
        height: 200px;
        overflow: hidden; 
        margin: 25px 0px 0px;
}
.jimgMenu ul {
        list-style: none;
        margin: 0px;
        display: block;
        height: 200px;
        width: 1340px;
}
.jimgMenu ul li {
        float: left;
}
.jimgMenu ul li a {
        text-indent: -1000px;
        background:#FFFFFF none repeat scroll 0%;
        border-right: 2px solid #fff;
        cursor:pointer;
        display:block;
        overflow:hidden;
        width:78px;
        height: 200px;
}
.jimgMenu ul li.landscapes a {
        background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
        background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
        background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
        background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
        background: url(images/urban.jpg) repeat scroll 0%;
        min-width:310px;
}

Gotowe!

Powodzenia!

Źródło: Alohatechsupport.net


Scrollable czyli mini galeria do przewijania

W tym przykładzie pokażę jak stworzyć mini galerię do przewijania za pomocą scrollable w jquery.

jquery_5

W tym przykładzie mamy 3 elementy, a każdy z nich ma 5 zdjęć. Możemy przewijać tylko klikając przyciski strzałek lub za pomocą lewego i prawego klawisza z klawiatury, ponieważ dążymy do minimalnej konfiguracji.

W pierwszej kolejności musimy określić nasze scrollable. Wprowadzamy wszystkie elementy, w tym przypadku wybraliśmy zdjęcia ze strony www.flickr.com. Oczywiście, elementy mogą zawierać wszystko co chcesz, w tym obrazy, Flash, tekst HTML. Możesz również wprowadzić dowolną ilość  takich elementów o dowolnej wielkości.

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   

   <!-- root element for the items -->
   <div class="items">

      <!-- 1-5 -->
      <div>
<img src="http://farm1.static.flickr.com/143/
                                321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/
                                2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/
                                244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/
                                66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/
                                399223606_b875ddf797_t.jpg" />
      </div>

      <!-- 5-10 -->
      <div>
<img src="http://farm1.static.flickr.com/163/
                                399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/
                                321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/
                                117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/
                                399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/
                                117346182_1fded507fa_t.jpg" />
      </div>

      <!-- 10-15 -->
      <div>
<img src="http://farm4.static.flickr.com/3629/
                                3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/
                                3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/
                                3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/
                                3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/
                                3323893148_8318838fbd_t.jpg" />
      </div>

   </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>

Scrollable szuka elemnetów, których nazwa klasy CSS jest prev i next, a następnie automatycznie wiąże szukaną akcję z nimi. Oczywiście, można określić inne nazwy dla nazw klas CSS, aby uniknąć problemu z istniejącymi nazwami klas CSS.

Poniżej przedstawiam najtrudniejszą część, a mianowicie minimalne ustawienia CSS umożliwiające poziome przewijanie. Prawdopodobnie do dostrojenia będzie właściwość width, bo tylko ona ma wpływ na wygląd.

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 660px;
	height:90px;
}

/*
root element for scrollable items. Must be absolutely
positioned and it should have a extremely large width
to accommodate scrollable items. it's enough that you
set width and height for the root element and not for
this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
a single item. must be floated in horizontal scrolling.
typically, this element is the one that *you* will style
the most.
*/
.items div {
	float:left;
}

Teraz najłatwiejsza część. Wystarczy wybrać element na stronie, który będzie przewijany.

<script>
// execute your scripts when the DOM is ready.
   this is mostly a good habit
$(function() {

	// initialize scrollable
	$(".scrollable").scrollable();

});
</script>

ZOBACZ DEMO

Więcej: flowplayer.org


Animowana nawigacja wykorzystująca jQuery i CSS

Niewątpliwie bardzo ważnym elementem każdego serwisu jest jego menu nawigacyjne. Często to ono nadaje właściwy ton stronie, stanowiąc przysłowiową kropkę nad i. Zastosowanie animacji w menu wprowadza element ruchu, który może przełamać statykę reszty strony.

Dzisiaj chciałabym podzielić się z Wami taką techniką wykorzystującą CSS i jQuery.

Zapraszam!

jquery1

ZOBACZ DEMO

KROK 1: Szkielet HTML

Ta część jest bardzo prosta. To jest typowa lista menu z linkami.

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

KROK 2: Styling - CSS

Do każdego elementu listy stosujemy technikę maskowania poprzez overflow:hidden. Spójrz na obrazek poniżej, aby zobaczyć co mam na myśli.

jquery_2

Zauważ, że nie ma podwójnych tagów <span> w kodzie w kroku 1. Będziemy dodawać to później.

ul#topnav {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	float: left; 
	font-size: 1.1em; 
}
ul#topnav li{ 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	float: left; 
	height:40px; 
} 
ul#topnav a, ul#topnav span { 
	padding: 10px 20px; 
	float: left; 
	text-decoration: none; 
	color: #fff; 
	background: url(a_bg.gif) repeat-x; 
	text-transform: uppercase; 
	clear: both; 
	width: 100%; 
	height: 20px; 
	line-height: 20px;
} 
ul#topnav a{ 
	color: #555; 
	background-position: left bottom; 
} 
ul#topnav span{ 
	background-position: left top; 
}

KROK 3: Animacja jQuery

Jak widać poniżej, skopiowaliśmy tagi <span>, a następnie będziemy je animować -40px na górę, aby przesuwać nawigację.

jquery_3

Poniższy skrypt wyjaśnia, które działania są wykonywane.

$ (Document). Ready (function () {

	$("#topnav li").prepend("<span></span>"); 

	$("#topnav li").each(function() { 
		var linkText = $(this).find("a").html(); 
		$(this).find("span").show().html(linkText); 
	}); 

	$("#topnav li").hover(function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "-40" 
		}, 250);
	} , function() { 
		$(this).find("span").stop().animate({ 
			marginTop: "0" 
		}, 250);
	});
});

ZOBACZ DEMO

POWODZENIA! TO BARDZO PROSTA TECHNIKA!

Źródło:

http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/