30 marca 2009
Jak zrobić piękną Galeria Portfolio przy użyciu jQuery animowania!
Wysłany przez: Mahbub W: misc
Robiąc stronę portfela z Flash na swojej stronie internetowej stało się swego rodzaju przestarzałe. Te dni z szybszymi maszyn i nowej generacji przeglądarki można bardzo skopać parę tyłków z JavaScript i CSS. JQuery ma świetny sposób, aby poradzić sobie z kilkoma efektami. Wszystkie animacje wynikają z podstawową metodę o nazwie "ożywione". To ożywia, nastolatków właściwości elementów DOM. Aby długą historię krótkiego spojrzeć na to.
Tak, już kliknął i zobaczył, prawda? Ok, jeśli spojrzeć na kod, to jest dość proste.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Oscylować (function () { . $ (This) znaleźć ("info_container"). Animować ({top: "0px"}, {czas trwania: 400, ułatwiając: hover_in_easing}).; }, Function () { . $ (This) znaleźć ("info_container"). Animować ({top: "100px"}, {czas trwania: 500, ułatwiając: hover_out_easing}).; }); / / 100 px to rozmiar maski });
Używa ożywionej funkcję animować maskę nad obrazem, który jest ukrywane przez pozycjonowanie względnie. I złagodzenie plugin, możemy osiągnąć jakiś fajny efekt odbijania po najechaniu się od obrazu. Możesz umieścić każdą html wewnątrz elementów info_container DIV o ile nie wykracza poza granice. Spójrz na arkuszu stylów, a znajdziesz to bardzo gramatycznych. Można dostosować rozmiary poprzez modyfikację klasy div.
Inspiracja: http://dibusoft.com/portfolio
Najnowsze komentarze