Forum Pasja Informatyki - Najnowsze z tagiem animate

Animate.css ustawianie animacji pojawiania się elementów.

Tue, 09 Nov 2021 22:05:33 +0000

https://animate.style/ czy ktoś z obecnych tutaj osób korzysta z tego rozwiązania? Chciałbym zatrzymać to do momentu dojeżdżania do danej sekcji. Np jestem na danej sekcji i wtedy rozpoczyna się to odliczanie dajmy na to 1s i obraz wjeżdża od prawej? Takie oczekiwanie na zdarzenie skrolla strony. Czy da się to w tej animacji ustawić? Mam dajmy na to w tej trzeciej obraz i nic mi z tego że mam ustawiony czas na 2 sekundy jak ktoś nie zdąży nawet tam przeskrolować a wszystko już wjechało?

Czy warto korzystać z animate.css w swoich projektach ?

Wed, 10 Aug 2016 17:28:30 +0000

Witam.

Ostatnio zacząłem uczyć się jQuery i podczas nauki natrafiłem na tą paczkę animacji (https://daneden.github.io/animate.css/). Tutaj pojawiło mi się kilka pytań w głowie. Czy używanie tego nie jest drogą na skróty oraz czy lepiej programować animacje samemu, lub posiłkować się tą paczką ?

Animacja dziwnie się zachowuje.

Sat, 21 May 2016 11:24:58 +0000

Witam.

Korzystam z biblioteki animate.css i animacja nie działa tak jak powinna. Chcę, aby działało tak jak na mojej stronie: http://www.aquastalka.pl, a działa tak: http://www.aquastalka.pl/szablon1/index.html.

Chodzi o to, że zawartość nie pokazuje się wraz z animacją, tylko już jest pokazana, a po zjechaniu pojawia się jeszcze raz.

Pozdrawiam.

Animacja JQuery (pętla) - problem przy refraktoryzacji

Sun, 20 Mar 2016 20:49:09 +0000

Witam.

Napisałem działający kod który uzupełnia progressbary po przejechaniu scrollem, jednak nie jest on zbyt optymalny i chcę go zrefraktoryzować, ale nie potrafię sobie z tym poradzić.

Działający kod:

 $(document).ready(function(){
 	var newprogress = new Array(14);
 	 newprogress[0] = $('#c').attr('aria-valuenow');
 	 newprogress[1] = $('#net').attr('aria-valuenow');
 	 newprogress[2] = $('#java').attr('aria-valuenow');
 	 newprogress[3] = $('#sql').attr('aria-valuenow');
 	 newprogress[4] = $('#js').attr('aria-valuenow');
 	 newprogress[5] = $('#php').attr('aria-valuenow');
 	 newprogress[6] = $('#bs').attr('aria-valuenow');
 	 newprogress[7] = $('#android').attr('aria-valuenow');
 	 newprogress[8] = $('#win').attr('aria-valuenow');
 	 newprogress[9] = $('#linux').attr('aria-valuenow');
 	 newprogress[10] = $('#uml').attr('aria-valuenow');
 	 newprogress[11] = $('#git').attr('aria-valuenow');
 	 newprogress[12] = $('#wzorce').attr('aria-valuenow');
 	 newprogress[13] = $('#entity').attr('aria-valuenow');
 	//console.log(newprogress);
 $(window).scroll(function anim(){
 	if ($(this).scrollTop() > 100){
 			
 	$('#c').animate({
 		width: parseInt(newprogress[0]) + '%'
 	},1000).clearQueue(anim);
 	$('#net').animate({
 		width: parseInt(newprogress[1]) + '%'
 	},1200).clearQueue(anim);
 	$('#java').animate({
 		width: parseInt(newprogress[2]) + '%'
 	},1400).clearQueue(anim);
 	$('#sql').animate({
 		width: parseInt(newprogress[3]) + '%'
 	},1600).clearQueue(anim);
 	$('#js').animate({
 		width: parseInt(newprogress[4]) + '%'
 	},1800).clearQueue(anim);
 	$('#php').animate({
 		width: parseInt(newprogress[5]) + '%'
 	},2000).clearQueue(anim);
 	$('#bs').animate({
 		width: parseInt(newprogress[6]) + '%'
 	},2200).clearQueue(anim);
 	$('#android').animate({
 		width: parseInt(newprogress[7]) + '%'
 	},2400).clearQueue(anim);
 	$('#win').animate({
 		width: parseInt(newprogress[8]) + '%'
 	},2600).clearQueue(anim);
 	$('#linux').animate({
 		width: parseInt(newprogress[9]) + '%'
 	},2800).clearQueue(anim);
 	$('#uml').animate({
 		width: parseInt(newprogress[10]) + '%'
 	},3000).clearQueue(anim);
 	$('#git').animate({
 		width: parseInt(newprogress[11]) + '%'
 	},3200).clearQueue(anim);
 	$('#wzorce').animate({
 		width: parseInt(newprogress[12]) + '%'
 	},3400).clearQueue(anim);
 	$('#entity').animate({
 		width: parseInt(newprogress[13]) + '%'
 	},3600).clearQueue(anim);
 	}

	});
 });

Kod po refraktoryzacji:

var newprogress = new Array('#c', '#net', '#java', '#sql', '#js', '#php', '#bs', '#android', '#win', '#linux', '#uml', '#git', '#wzorce', '#entity')
var progress= [14];

 $(document).ready(function(){
 	 	
 	 for(i=0; i < 14; i++){
 	 	
 	 progress[i] = $(newprogress[i]).attr('aria-valuenow'); 
 	
 	 }

 $(window).scroll(function anim(){
 	  	var x = 1000;
 		if ($(this).scrollTop() > 100 ){
 			for(j=0; j < 14; j++ ){
 				$(newprogress[i]).animate({
 					width: parseInt(progress[i]) + '%'	
 				},x+200).clearQueue(anim);
 			}
		}
 });

 	
 });

Pierwsza część kodu działa, bo poprawnie przypisuje do tablicy wartości atrybutów 'aria-valuenow', ale animacja nie chce się wykonać. Gdzie popełniam błąd? W konsoli brak błędów. Nie chcę gotowego kodu, proszę mnie naprowadzić na rozwiązanie.

Animeate.css coś nie pykło

Thu, 04 Feb 2016 16:18:55 +0000

Mam problem z animacją.

Chciałem poprzez znaczki <i></i> Każdej literce dodać inne wejście na strone tzn. animated slideInDown ale one tylko migają.

<div id="headerwrap">
        <div class="container">
            <div class="row centered">
                <div class="col-lg-12">
                    <h1><i class="animated slideInDown">>K</i><i>a</i> <i>r</i><i>o</i><i>l</i></h1>
                </div>
            </div>
        </div>
    </div>

Animacja - uciekający div

Mon, 14 Dec 2015 16:21:19 +0000

PLIK HTML:

<!DOCTYPE html>
<html lang ="pl">
<head>
    <title>JavaScript</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
    <script type="text/javascript" src="javascript.js"></script>
    <link rel="stylesheet" href="style-css.css"/>
</head>
<body>
    <div id="strona">
        <div id="blok"></div>
    </div>
</body>
</html>

PLIK CSS:

body{
    background-color: #555555;
    font-size: 30px;
}

#strona{
    background-color: #657564;    
    width: 960px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
}

#blok{    
    position: absolute;
    left: 100px;
    width: 100px;
    height: 280px;
    background-color: #ff0473;
    margin-top: 100px;
}

PLIK JAVASCRIPT / JQUERY:

$(document).ready(function(){
    $("#blok").hover(
    function(){$(this).stop().animate({left: "+=60px", backgroundColor: 'rgb(255,4,115)'}, 800, "easeInSine")},
    function(){$(this).stop().animate({left: "-=60px", backgroundColor: 'rgb(110,138,195)'}, 1200)});
});

1.Przetestujcie kod z wyłączoną funkcją 'stop()'

2. Przetestujcie identyczny kod u siebie

W pierwszym przypadku animacja wykonuje się kilkakrotnie nawet po zatrzymaniu wskaźnika lecz gdy wcześniej najedziemy kilkakrotnie na div.

W drugim przypadku użyto funkcji 'stop()' i animacja wykonuje się razy cały problem tkwi w skutku ubocznym drugiego przypadku co sami zapewne zauważyliście i o rozwiązanie właśnie tego problemu proszę