Forum Pasja Informatyki - Najnowsze z tagiem animacje

Dlaczego moje animacje tracą synchronizację?

Wed, 23 Aug 2023 17:56:00 +0000

Witam,
Mam problem. Potrzebuję pomocy. Muszę zsynchronizować obie animacje. Slider i animację pisania, ale nie mogę tego zrobić. Kiedy użytkownik jest na stronie (obecnej karcie otwartej w przeglądarce), działa świetnie, ale kiedy przechodzi do innej karty i wraca na stronę, coś idzie nie tak i animacja nie jest zsynchronizowana, nie wiem dlaczego. Prawdopodobnie slider próbuje nadrobić czas, w którym użytkownik był na innej karcie. Czy ktoś może mi pomóc? Wielkie dzięki!

JS:

document.addEventListener("DOMContentLoaded", function() {
  const carousel = document.querySelector('.carousel');
  const slides = document.querySelectorAll('.slide');
  let slideWidth = slides[0].offsetWidth;
  let centerOffset = (carousel.offsetWidth - slideWidth) / 2;
  let currentCenterIndex = 2;
  let intervalId;
  const carouselPeriod = parseInt(carousel.getAttribute('data-period')) || 7600;

  function updateSlideWidth() {
    slideWidth = slides[0].offsetWidth;
    centerOffset = (carousel.offsetWidth - slideWidth) / 2;
  }

  function goToSlide(index) {
    const slideOffset = centerOffset - slideWidth * index;
    carousel.style.transform = `translateX(${slideOffset}px)`;
    currentCenterIndex = index;

    slides.forEach((slide, i) => {
      if (i === currentCenterIndex) {
        slide.classList.add('color-slide');
      } else {
        slide.classList.remove('color-slide');
      }
    });
  }

  function nextSlide() {
    if (currentCenterIndex < slides.length - 1) {
      goToSlide(currentCenterIndex + 1);
    } else {
      currentCenterIndex = 0;
      goToSlide(currentCenterIndex);
    }
  }

  function startCarousel() {
    intervalId = setInterval(nextSlide, carouselPeriod);
  }


  startCarousel();
  function handleResize() {
    updateSlideWidth();
    goToSlide(currentCenterIndex);
  }
  updateSlideWidth();
  window.addEventListener('resize', handleResize);


  class TxtType {
    constructor(el, toRotate, period) {
      this.toRotate = toRotate;
      this.el = el;
      this.loopNum = 0;
      this.period = parseInt(period, 10) || 1000;
      this.txt = '';
      this.totalTime = 9000;
      this.timePerChar = this.totalTime / (this.toRotate.join('').length * 2);
      this.isDeleting = false;
      this.animationComplete = false;
      this.tick();
    }
    tick() {
      var i = this.loopNum % this.toRotate.length;
      var fullTxt = this.toRotate[i];

      if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
      } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
      }

      this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

      var that = this;
      var delta = this.isDeleting ? this.timePerChar / 2 : this.timePerChar;

      if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period - this.timePerChar * fullTxt.length;
        this.isDeleting = true;
      } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
      }

      if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period - this.timePerChar * fullTxt.length;
        this.isDeleting = true;
        this.animationComplete = true;
      }

      setTimeout(function () {
        that.tick();
      }, delta);
    }
  }
  


  function write() {
    var elements = document.getElementsByClassName('typewrite');
    for (var i = 0; i < elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-type');
      var period = elements[i].getAttribute('data-period');
      if (toRotate) {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
    }
  };
  write();
});

CSS:

.carousel-container {
    overflow: hidden;
    position: relative;
  }

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out !important; 
}

.slide img {
    width: 384px;
    height: 305px;
    filter: grayscale(1);
    transition: scale 1.4s;
    scale: .7;
}

.color-slide img {
    filter: grayscale(0);
    scale: .9;
    opacity: 1;
}

.thanks_for_support {
    color: #000;
    text-align: center; 
}



.typewrite > .wrap {
    position: relative;
    overflow: hidden;
}

.typewrite > .wrap::after {
    content: '';
    height: 100%;
    width: 3px;
    position: absolute;
    right: -2%;
    top: 0;
    background-color: #000;
    animation: closeBar 1.6s infinite .7s ease-out;
}

HTML:

<div class="thanks_for_support">
<h4 style="min-height: 68px;">THanks: <br/><a href=""><span class="text typewrite" data-period="7000" data-type='["TETEE", "ESTC", "TESTB", "TESTA", "WA", "DDDDDDDDD" ,"ZZZZZZ" ,"XXXXXXXXXX"]'></span></a></h4>
</div>
<div class="carousel-container">
<div class="carousel" data-period="7600">
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="">
    </a>
  </div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
    </a>
  </div>
  <div class="slide color-slide">
    <a href="#">
      <img src="https://plus.unsplash.com/premium_photo-1664457233806-e1477e52e2ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=765&q=80" alt="">
    </a>
  </div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
    </a>
  </div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1495231916356-a86217efff12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="">
    </a>
  </div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1566275529824-cca6d008f3da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="">
    </a>
</div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1457089328109-e5d9bd499191?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=663&q=80" alt="">
    </a>
</div>
  <div class="slide">
    <a href="#">
      <img src="https://images.unsplash.com/photo-1482482097755-0b595893ba63?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="">
    </a>
  </div>

Zlecę wykonanie animacji na stronie startowej.

Tue, 07 Dec 2021 09:34:27 +0000

Cześć,

szukam osoby, która podejmie się wykonania następujących animacji:

Chciałbym, żeby samochód znajdujący się przed budynkiem podjeżdżał od lewej do prawej. Po tym mają otworzyć się główne drzwi, i ma się pojawić napis "kliknij tutaj" gdzie będzie przekierowanie do kolejnej podstrony.

Jeżeli potrafisz wykonać opisaną animację napisz swoją cenę, a skontaktuje się z Tobą.

Pozdrowienia

Narzędzia do tworzenia wizualizacji w VS

Wed, 24 Nov 2021 13:24:10 +0000

Cześć wszystkim!
Miałbym prośbę o podpowiedź. zmagam się teraz z pracą inżynierską i jednym zadań jest wykonanie programu symulującego działanie płaskiego robota o kinematyce równoległej 5-R. Model kinematyki 5-R to takie coś, jak byś ktoś był ciekawy:https://www.youtube.com/watch?v=c6jG3WN4W8Y
Tak więc potrzebuję napisać aplikację pulpitową na windows z animacją 2D lub 3D, w której można by zmieniać parametry, typu wpisywanie kątów silnika. Chciałbym to zrobić w c++ lub c# w Visual Studia.
I moje pytanie jest, jakie narzędzia z Visual Studio byłyby do tego najlepsze? Co warto zainstalować i czego warto się nauczyć?
A może ktoś by doradził lepsze narzędzie?
Będę wdzięczny za wszystkie odpowiedzi!

Tworzenie gry - proste animacje 2D

Tue, 23 Nov 2021 13:34:43 +0000

Hej, chciałabym prosić o poradę. Mianowicie, chciałabym napisać grę w js. Prosta gierka w której trzeba przejść na drugą stronę ulicy, tak żeby auto cię nie trzasło ;P Problem w tym, że mam ambicję zrobić do tego jakieś szczątkowe animacje, żeby np. postać przechodząca ruszała nogami (No wiecie, jedna podniesiona, druga w dole, i na odwrót, jak w starych grach). Pewnie dałoby się znaleźć gotowy kod w internecie, ale gdzie w tym zabawa? W tu pytanie. Jak najlepiej napisać taką grę? Chodzi o to, czy użycie canvasa sprawdziłoby się, czy raczej niezbyt, kiedy chciałabym postać wgrać jako png? Jeśli nie, to czy są jakieś dobre sposoby? Z góry dziękuję za odpowiedzi ^^

Animacje na stronie internetowej - jakiej biblioteki użyć?

Fri, 06 Aug 2021 07:51:50 +0000

Hej programiści i programistki :D

Na wielu stronach internetowych jest taki fajny efekt (chyba, że przesadzony, wtedy niefajny), że przy skrolowaniu na ekranie kolejne elementy pojawiają się z jakąś subtelną animacją, np. wjeżdżają z prawej / lewej, albo mają efekt fade-in. Zapewne są jakieś fajne biblioteki js, które pozwolą w łatwy sposób dodać takie animacje do strony.

Z jakich więc korzystaliście i jakie polecacie?

Z góry dzięki za odpowiedź, pozdrawiam cieplutko :D

Animacja zmienia położenie postaci w unity

Thu, 25 Mar 2021 10:03:08 +0000

Uczę się dodawania animacji w unity i mam taki, problem, że kiedy animacja działa to postać się nie porusza i nie wiem czego to jest przyczyna. Tutaj mój skrypt do poruszania się postacią:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Threading;
using UnityEngine.UI;

public class ster : MonoBehaviour
{
    public GameObject spadłeś, muzyka, muzykaDoPrzegranej, panel ;
    public Text licznik;
    
    void Start()
    {
        Thread.Sleep(1000);
        Time.timeScale = 1;
        panel.SetActive(false);
        muzykaDoPrzegranej.SetActive(false);
        muzyka.SetActive(true);
        
    }

    
    void Update()
    {
        int licz = int.Parse(licznik.text);
        int szybkość = 7;
        if (licz > 0 && licz < 60)
        {
            szybkość = 7;

        }
        if (licz > 60 && licz < 300)
        {
            szybkość = 9;

        }
        if (licz > 300 && licz < 600)
        {
            szybkość = 11;

        }
        if (licz > 600 && licz < 1000)
        {
            szybkość = 13;
        }
        if (licz > 1000)
        {
            szybkość = 15;
        }
        GetComponent<Rigidbody>().velocity = new Vector3(0, GetComponent<Rigidbody>().velocity.y, szybkość);
        if (Input.GetKey(KeyCode.A))
        {
            GetComponent<Rigidbody>().velocity = new Vector3(-3, GetComponent<Rigidbody>().velocity.y, szybkość);
        }
        if (Input.GetKey(KeyCode.D))
        {
            GetComponent<Rigidbody>().velocity = new Vector3(3, GetComponent<Rigidbody>().velocity.y, szybkość);
        }
        if(transform.position.y < -7)
        {
            spadłeś.SetActive(true);
            muzyka.SetActive(false);
            muzykaDoPrzegranej.SetActive(true);
            Time.timeScale = 0;
        }
        


    }
}

animation-delay nie działa

Wed, 03 Feb 2021 14:19:15 +0000

Cześć, stworzyłem w css animację, która miałaby się pojawić z kilkusekundowym opóźnieniem, jednak animation-delay nie działa i animacja pojawia się od razu.

.box{
	z-index: 1;
	padding-left: 50px;
	animation: fadeIn ease 3s ;
    animation-delay: 12s;
	
   -webkit-animation: fadeIn ease  3s ;
   -moz-animation: fadeIn ease  3s;
   -o-animation: fadeIn ease 3s;
   -ms-animation: fadeIn ease  3s;
}

@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

Animacje w CSS

Tue, 02 Feb 2021 16:41:28 +0000

Chciałbym stworzyć efekt animacji w css podobny do tych na stronie bonzibuddy.tk , tylko w pionie. Moje pierwsze pytanie brzmi, jak rozmieścić elementy żeby były rozmieszczone w równych odstępach na całej stronie oraz żeby nie przesuwały/zakrywały stałego, środkowego napisu? Chcialbym również wiedzieć gdzie w internecie mogę znaleźć taką animację.

Animacje w blenderze.

Fri, 15 Jan 2021 10:57:14 +0000

Witam. Nie wiem, czy to dobry dział, ale lepszego nie znalazłem. Posiadam trzy animacje: https://www20.zippyshare.com/v/kh2IJYXp/file.html

Musze zrobić coś takiego, aby z animacji Run.fbx ruch nóg postaci przenieść do obu animacji Aim-90 oraz Aim90. Jak można tego dokonać?

Javascript animacje

Sat, 26 Dec 2020 14:29:27 +0000

Ktoś ma jakiś dobry poradnik dla początkującej osoby z animacjami w JS. Taki żeby np nauczyć się takich prostych rzeczy jak slider albo prosta animacja dla całej sekcji. Preferował bym żeby był po polsku, lecz może być również po angielsku sam szukam od paru dni i nic takiego nie mogę znaleźć. Z góry dzięki.

Jak zaimplementować animację, która jest opisana w XML. Android

Tue, 22 Dec 2020 15:50:25 +0000

Cześć,

mam aplikację która składa się m.in z navigation tabs. Kiedy user kliknie na dany element apka przechodzi do nowego ekranu, wtedy też FloatingActionButton powinien pojawiać się poprzez animacje typu show-in.

Nigdy nie implementowałem animacji zawartych w formie XML do mojego kodu, czy jest na Forum ktoś kto potrafiłby wytłumaczyć jak takie rozwiązania implementować?

Kod animacji:

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="opacity"
        android:startOffset="0"
        android:duration="200"
        android:interpolator="@interpolator/mtrl_linear_out_slow_in"/>
    <objectAnimator
        android:propertyName="scale"
        android:startOffset="0"
        android:duration="200"
        android:interpolator="@interpolator/mtrl_linear_out_slow_in"/>
    <objectAnimator
        android:propertyName="iconScale"
        android:startOffset="0"
        android:duration="0"
        android:interpolator="@interpolator/mtrl_fast_out_slow_in"/>
</set>

Kod MainActivity:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.MyAppProject.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.MyAppProject.PopupOverlay" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/home" />
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/all_charts" />
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/low_score" />
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/big_score" />

        </com.google.android.material.tabs.TabLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

</androidx.viewpager.widget.ViewPager>
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Animacje SVG po przyciśnięciu

Sun, 22 Nov 2020 19:09:17 +0000

Witam

Stworzyłem kilka obiektów przy użyciu <path> i chcę je zanimować. Gdyby chodziło jednak tylko o to, to bym sobie poradził. Muszą to być animacje aktywowane po przyciśnięciu danego obrazka. Próbowałem wielu rzeczy, przejrzałem wiele stron oraz obejrzałem wiele filmików, jednak żaden nie był w stanie mi tego ładnie wyjaśnić.

Animacja pytanie

Tue, 13 Oct 2020 10:14:03 +0000

Witam wszytskich dostojnikow,

Jestem, zafascynowany animacyją ze strony Pana Krzysztofa Jackowskiego którą widac od razu na stracie.

https://krzysztof-jackowski.info/

Pozdrawiam

Jak zapętlić animację CSS dla kilku img?

Fri, 25 Sep 2020 18:55:48 +0000

Wymyśliłem sobie taka animację:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pl">
<head>
<title>animacja</title>
<meta charset="utf-8">
<style> 
html, body {overflow: hidden;}
@keyframes animacja
{
0% {left:100%;}
5%{left:30%;}
90%{left:30%;}
100%{left:-110%}
}

#animacja img
{
  position:absolute;
  margin:0 auto; 
  left: 100%;
  height:280px;
  width:450px;
}
#animacja img:nth-of-type(1)
{
   animation: animacja 6s 0s linear infinite normal;  
  -webkit-animation: animacja 6s 0s linear infinite normal;  
}
#animacja img:nth-of-type(2)
{
   animation: animacja 6s 6s linear infinite normal;  
  -webkit-animation: animacja 6s 6s linear infinite normal;  
}
#animacja img:nth-of-type(3)
{
   animation: animacja 6s 12s linear infinite normal;  
  -webkit-animation: animacja 6s 12s linear infinite normal;  
}
#animacja img:nth-of-type(4)
{
   animation: animacja 6s 18s linear infinite normal;  
  -webkit-animation: animacja 6s 18s linear infinite normal;  
}  
</style>
</head>
    
<body>
<div id="animacja">
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
    
</div>

</body>
</html>

Wszystko ładnie się zaczyna, animują się kolejno obrazki ale tylko do ostatniego. Zapętla się tylko "img:nth-of-type(4)" a chciałbym aby całość była w nieskończonej pętli. W animacji poniekąd sugerowałem się rozwiązaniem ze strony: http://css3.bradshawenterprises.com/cfimg/#cfimg3 a dokładnie akapitem "Demo with multiple images" gdzie animacja jest właśnie zapętlona. Być może potrzebny jest jakiś skrypt js ale nie jestem w stanie tego ustalić :(

Co zrobić aby zapętlić taką animację?

react spa animacje

Sun, 16 Aug 2020 19:30:04 +0000

Witam,

Osttatno miałem problem z karuzelą i animacją ale odpuściłem(okazało się zbyt trudne), i nagle okazało się, że SPA w react też przecież odpala się 'od razu' więc animacje też odpalają się jak użytkownik nie ma szansy jej zobaczyć...(niżej położone) a jednak widziałem SPA gdzie w miarę przewijania strony jest uruchamiana animacja niezależnie czy jest robiona przy pomocy czystego CSS czy jakiejś biblioteki. Czy ktoś mógłby mi wyjaśnić jak to jest robione? Proszę o pomoc

Darmowy program do animacji

Fri, 10 Jul 2020 13:16:54 +0000

Witam,

Szukam jakiegoś darmowego programu do robienia i edycji animacji, koniecznie z funkcją tweeningu. Chodzi mi o coś bardziej profesjonalnego niż np. Pivot Animator. Ważna jest też licencja; żebym mógł program zainstalować za darmo i za darmo rozpowszechniać animacje (linencja GNU GPL, Freeware, Open Source itp.).

Animacje wejścia jquery

Wed, 01 Jul 2020 12:52:13 +0000

Jak zrobić animację np. tekstu wjeżdżającego z boku strony po scrolowaniu do danego poziomu? Jakieś wskazówki?

Unity animacje z mixamo

Fri, 19 Jun 2020 18:29:20 +0000

Dzień dobry. Przychodzę tutaj ponownie, z powodu takiego, że nie działa mi animacja z mixamo, a kiedy pobierałem niedawno na chociaż by bieganie, to wszystko śmigało. Model jest humanoidem, ma wszystkie kości, tak samo animacja. Jednak widzę różnice ogromną w układzie rąk jeśli chodzi o podgląd animacji na mixamo, i podgląd animacji w już samym unity. Ta animacja, to konkretnie: "Rifle Aiming Idle". Wysakuje mi też przy dodaniu tej animacji taki błąd w "Import messages": Clip 'mixamo.com' has import animation warnings that might lower retargeting quality: 'Neck1' is inbetween humanoid transforms and has rotation animation that will be discarded". Pisało tam też coś o tym, żeby w animacji włączyć "Translation DoF", włączyłem i już błąd z tym się nie wyświetla. Jak na to zaradzić? Dam najlepszą odpowiedź, za najlepszą odpowiedź :D.

Jak zmodyfikować Ethana?

Tue, 11 Feb 2020 21:55:46 +0000

Chodzi mi o prefab Ethana ze standardowych assetów. Domyślnie Ethan biegnie, a po naciśnięciu klawisza Shift zwalnia i idzie, a ja chciałbym by było odwrotnie. Oraz pytanie jak dodać animację chodu w tył? Samą animację mam, chcę dodać ją do prefaba, ale nie widzę w animatorze przejść między stanami idle>run>walk czy coś w ten deseń, tylko trzy stany grounded, crouching i airbourne

Czy kod jest poprawny?

Mon, 27 Jan 2020 20:45:18 +0000

Witam wszystkich!

Aktualnie przerabiam kod Samuraja Programowania z tego odcinka.

I trochę go zmieniłem, a nie miałem wcześniej zbyt dużego doświadczenia z animacjami css, dlatego chciałbym spytać czy mój kod jest dobry i spełnia on wszelkie standardy itd.

Html:

    <div class="writingEffect">
        <h1>Good Morning</h1>
    </div>

Css:

.writingEffect
{
  background-color: #000;
  color: #fff;
}

.writingEffect h1 {
   display: inline-block;
   position: relative;
   font-family: monospace;
   font-size: 60px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 32.5%;
   letter-spacing: 10px;
  }

.writingEffect  h1::after {
   box-sizing: border-box;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #000;
   top: 0;
   right: 0;
   animation:writing 2s steps(12) forwards 1;
  }

  @keyframes writing {
   0% {
    width: 100%;
   }
  
   100% {
    width: 0%;
   }

  }

A i jeszcze mam pytanie: czy jeśli kod jest w większości z gotowego źródła i jest jedynie po niewielkiej modyfikacji, to mogę go używać bez żadnych problemów u siebie na stronie, nawet jeśli zarabiała by ona jakieś pieniądze?

Dziękuję za poświęcony czas, miłego wieczoru!

Jak stworzyć 3d

Sun, 19 Jan 2020 09:53:50 +0000

Witam, chciałbym się dowiedzieć jak można stworzyć takie coś:

w photoshopie bądz (najlepiej) przez javascript.

Czy istnieje biblioteka, czy coś w tym stylu, która pozwoliłaby na tworzenie takiej siatki 3d, w której w łatwy sposób mógłbym stworzyć taką kulę itd.? Oraz czy można by było to animować

Unity - problem z animatorem

Sun, 15 Dec 2019 12:58:26 +0000

Witam, mam taki problem. Utworzyłem Canvas a w nim Panel, w tym mam tekst, obrazki itd. Chciałbym, zrobić do tego animację. I tu pojawia się problem. Zaznaczam Canvas i tworzę nową animację. Oczywiście ainmator tworzy się automatycznie tylko, że jest cały czas wyłączony nawet kiedy gra nie jest włączona a kiedy go zaznaczam automatycznie jest odznaczany.

Animacje w JS

Mon, 07 Oct 2019 21:35:17 +0000

Chciałbym stworzyć animację na zasadzie, tego, że przy włączaniu strony z centralnego punktu rozchodzą się płynnie obiekty na ustawione wcześniej pozycje, taki rozbryzg jakby, i teraz nie mam pojęcia jak się za to zabrać i czy do samego ustawienia obiektów (są one porozrzucane) dobry będzie grid czy znacie może jakąś lepszą metodę?

Blender materials

Thu, 27 Jun 2019 10:00:40 +0000

Cześć, zrobiłem prosty model postaci w blenderze, dodałem kości, exportowałem do Unity, i jak zaczynałem animować zauważyłem, że przy poruszaniu kośćmi materiały się "bugują" w takim sensie jak widać na załączonym obrazku. Jeśli ktoś wie jak to rozwiązać, a wiem, że się da to prosiłbym o pomoc. Dzięki pozdrawiam ;)

Frontend, animacja, zdjęcie

Sat, 08 Jun 2019 21:49:10 +0000

Cześć,

Jak zrobić taką animację, że zdjęcie zostaje zasłaniane przez nowy content? Na stronie https://www.ziemniak.tv/ na zdjęcie tego pana najeżdża nowy content. Chodzi mi o stałą pozycje zdjęcia i takie jakby przesłanianie przez nowy.

Przejście między podstronami

Wed, 15 May 2019 17:54:32 +0000

Cześć,

Czy ktoś mógłby mi dać linka do jakiegoś poradnika który pozwoliłby mi osiągną podobny efekt przechodzenia między podstronami jak w tym szablonie https://html5up.net/dimension

jak dodać animację 2d na stronę?

Mon, 03 Dec 2018 11:27:35 +0000

Cześć!

Chciałbym dodać do swojej strony animację 2D którą np. zrobię w blederze. Chciałbym też aby po dodaniu jej np. określić że ma się pokazywać cały czas w lewym dolnym rogu nawet jeżeli użytkownik przesunie stronę w dół suwakiem

jQuerry hover problem

Wed, 07 Nov 2018 17:04:14 +0000

Witam!

Tworze portfolio w którym chciałem zrobić chyba całkiem prostą animacje po najechaniu polegającą na odwróceniu elementu o 180* na osi Y, podmianie grafiki (zmiana src do grafiki dodając 1 na końcu nazwy przed rozszerzeniem) w połowie obrotu i wyświetleniu tekstu. Tekst jest niewidoczny przed najechaniem bo jest odwrócony o 90* na osi Y. Transition obrotu trwa .6s także dodałem timeout który po 300ms zamienia grafike i obraca tekst tak aby pokazać "drugą strone tarczy". I teraz jeżeli najade na element na odpowiednio długo to wszystko działa tak jak chce. Jednak jeżeli odrazu zjade z elementu to timeout sie wykonuje później i animacja zaczyna sie wykrzaczać. Podmiana obrazka miga i wraca do odpowiedniego stanu (jednak to miganie też nie jest ok) a tekst w ogóle nie znika i pojawia się w momencie w którym go nie powinno być. Po wykrzaczeniu jeśli najade na dłużej to wszystko sie naprawia jednak przy na przykład przypadkowym szybkim przejechaniu myszką po wszystkich elementach animowanych w ten sposób na każdym jest błąd. I tutaj prosze o pomoc. Czy wie ktoś może jak mógłbym to naprawić?

oto kod JS:

const rotate=()=>{
$('.skill').hover(
    function(){
        $('img',this).addClass('rotate');
        setTimeout(()=>{
            $('p', this).css('transform','rotateY(0deg)');
            $('img',this).attr('src', ()=>{
                let src=$('img',this).attr('src');
                src=src.substr(0,src.lastIndexOf('.'));
                src=src+'1.png';
                return src;
            })
        },300)
    },
    function(){
        $('img',this).removeClass('rotate');
        $('p', this).css('transform','rotateY(90deg)');
        setTimeout(()=>{
            $('img',this).attr('src', ()=>{
                let src=$('img',this).attr('src');
                src=src.substr(0,src.lastIndexOf('.')-1);
                src=src+'.png';
                return src;
            })
        },300)
    }
)
}

tutaj HTML:

<div class='skill'>
 <h1> Nagłówek </h1>
  <img src="obrazek ktory sie obraca">
  <p> jakiś tekst który też jest animowany </p>
</div> 
no i takich elementów jest na stronie 6

i css:

.skill{
    margin-top: 1rem;
    font-size: 1.9rem;
    position: relative;
}
.skill h1{
    line-height: .8;
}
.skill p{
    font-size: 1rem;
    width: 65%;
    color: white;
    position: absolute;
    margin: 37% auto 0 auto;
    top: 0;
    left: 0;
    right: 0;
    transform: rotateY(90deg);
    transition: 0.3s ease;
}
.skill img {
    transition: .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.rotate{
    transform: rotateY(180deg);
}

Mam nadzieje że wystarczająco zarysowałem spawe :) z góry dziękuje za pomoc

Animowany przycisk w SVG

Sat, 29 Sep 2018 15:03:25 +0000

Witam, chcę zrobić przycisk typu "play/pause" w SVG. (Kodu nie będę zamieszczać, bo to tylko dwa krótkie "path-y".) Zamierzam jakoś go ciekawie zanimować, żeby po kliknięciu trójkąt płynnie przechodził w dwa pionowe prostokąty. Tak samo w drugą stronę. Nie wiem TYLKO jak to zrobić. Wiem że SVG można animować za pomocą elementu <animate/> i css-owych @keyframes-ów.

Które rozwiazanie wybrać?

Które będzie najlepiej (jeśli w ogóle) współpracować z javascriptem (przełaczanie pomiędzy stanami play/pause z użyciem tychże animacji)?

Które będzie najmniej mocoobliczeniowożerne?

A może są jeszcze inne rozwiązania?

Proszę o pomoc. Niby taki mały niewinny przycisk, a mnie wykańcza.

animacja slider

Sat, 22 Sep 2018 16:47:34 +0000

Witam, mam problem odnośnie dodania prostej animacji przejścia jednego zdjęcia w kolejne na sliderze. Chodzi o to, że za każdym razem po wciśnięciu na strzałkę w lewo lub w prawo chciałbym nadać jakieś lekkie opacity na kolejny element img żeby zmiana nie była natychmiastowa tylko np. 0.5s. Napisałem sobie taki kodzik w jsie:

function slideLeft() {

    slideAnim();

    index--;

    if (index < 0) {
        index = photos.length - 1;
        actualSlide.src = photos[index];

    } else {
        actualSlide.src = photos[index];
    }

}

function slideRight() {

    slideAnim();

    if (index == photos.length - 1) {
        index = -1;
    }

    index++;
    actualSlide.src = photos[index];
}

function slideAnim() {
    actualSlide.classList.toggle('active');
}

leftBar.addEventListener('click', slideLeft)
rightBar.addEventListener('click', slideRight)

W cssie mam:

.slide {
    width: 100%;
    height: 100%;
}

.slide.active {
    animation: slide .5s linear;
}

@keyframes slide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

Odwołuję się do znacznika img o klasie .slide:

<div class="sliderBox clearfix">
                <div class="barL"><i class="fas fa-angle-left"></i></div>
                <div class="slider"><img class="slide" src="img/projects/1.jpg" alt="furniture"></div>
                <div class="barR"><i class="fas fa-angle-right"></i></div>
            </div>

Problem polega na tym, że animację dodaje mi tylko na co drugie zdjęcie, rozumiem że to przez metodę toggle. Teraz pojawia się pytanie jak dodawać animację za każdym razem.

Program do tworzenia gier/Animacja - które szybsze rozwiązanie?

Sat, 11 Aug 2018 11:07:45 +0000

Witam

Muszę stworzyć program który ma przedstawiać symulacje ustroju magnetoelektrycznego a co z tym idzie poruszające się elementy.Jeżeli chodzi o programowanie to bardziej html, css, php , grafika trochę . Myślałem o programie do tworzenia gier,próbowałem w Construct Classic ale coś mi nie wychodziło.Myślałem też o animacji ale znowu jaki program jak.Myślałem o czymś takim:

Animacja z przyciskami

http://www.animations.physics.unsw.edu.au/jw/electricmotors.html

albo coś takiego

http://www.physics-chemistry-interactive-flash-animation.com/electricity_electromagnetism_interactive/laplace_lorentz_force_electric_motor_principle_brushes_split_ring.htm

Z góry dziękuję Pozdrawiam

Jak dodać animacje?

Mon, 30 Apr 2018 19:22:22 +0000

Na wstępie chcę powiadomić, że nie wiem do jakiej kategorii to zaliczyć, dlatego też wybrałem algorytmy.

Witam

Tworzę grę w unity i chciałbym się zapytać czy znalazłby się ktoś kto mógłby mi pomóc z dodaniem animacji. Pobrałem ten projekt (de facto są do niego dodane animacje, ale pomimo moich starań zaimplementowania ich - nie działają). Pobrałem projekt, dodałem model - brak animacji. Dodawałem na różne sposoby - nadal nic. Poszukałem trochę w internecie i dowiedziałem się, że należy w polu "animator" wybrać "humanoid", ale wyskakuje mi błąd.

BŁĄD:

Invalid Avatar Rig Configuration. Missing or invalid transform: Required human bone "Head" not found.

Wiem, że błąd oznacza brak "kości głowy" naszego bohatera, ale zauważyłem, że ten obiekt nie angażuje głowy w animacjach.

A oto kilka podglądów z unity:

* Pobrana paczka + ustawienia domyślnie "rig" modelu

* PlayerController - połączenie animacji + warunek

* PlayerController - warunki animacji

* Ustawienie FPSController

* Ustawienia modelu

* Konfiguracja podczas ustawienia "rig" na "Humanoid"

Siedzę przy tym cały dzień i powoli tracę wiarę. Dla wszystkich pomagających podziękowania!

Jeżeli potrzeba więcej informacji, po prostu napisz - chętnie odpowiem :)

Pozdrawiam

Jak manipulować tą figurą za pomocą animacji ?

Mon, 02 Apr 2018 12:07:39 +0000

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
<link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    
    
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
    
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
    </head>
    

<body>
        
            <div class="header">

                <div class="name">DARIUSZ HOZER</div>

            </div>   
        
        
        
    <div class="main" >
             
            <video  autoplay>
                    <source src="" type="video/mp4">
                 
           
                  </video>

                  
<div class="triangle">
                  <div class="prosta_1"></div>
                  
                  <div class="prosta_2"></div>
                  <div class="prosta_3"></div>
</div>










    </div>  
        
        
    <div class="footer"></div>
		

</body>
</html>

body{
	width:100%;
    height: auto;
	margin:0;
	
}


.header{
    
    width: 100%;
    height:5vh;
    position: fixed;
    background-color: black;
     background-size: 100% 100%;
    z-index: 100;
}

.name{
 display:inline;
    color:aliceblue;
  font-size: 2.3vh;
    font-family: 'Montserrat', sans-serif;
position: absolute;
top:1.4vh;
right:1vh;
    
 
}


.main{
   
     width: 100%;
     height:400vh;
     background-size: 100% 100%;

}

video{
 width: 100%;
 height:auto;
background: cover;
background-size:100% 100%;
}

 

.prosta_1{
position:absolute;
top:70vh;

width: 30%;
height: 0.5vh;
background-color: black;

}


.prosta_2{
    position:absolute;
    top:42vh;
    left:16vh;
    width: 30%;
    height: 0.5vh;
    background-color: black;
    transform:rotate(60.1deg);
    }


    .prosta_3{
        position:absolute;
        top:42vh;
        left:-16vh;
        width: 30%;
        height: 0.5vh;
        background-color: black;
        transform:rotate(-60deg);
        }



.triangle{

position: absolute;
width: 100%;
height: auto;
top:10vh;
left:34%;
animation-name:triangle;
animation: 4s infinite;
transform:rotate(360deg);
}

@keyframes triangle{

from{transform:rotate(0deg) }
    to{transform:rotate(360deg)}


}



























.footer{
    
     width: 100%;
    height:4vh;
    background-color:black;
     background-size: 100% 100%;

}

CSS animacje przejście pomiędzy zdjęciami

Fri, 02 Mar 2018 16:03:42 +0000

Siemka, mam pytanko dotyczące animacji w CSS. Chodzi mi o to że w momencie kiedy zmieniam zdjęcia (background: url("zdjecie");) jest taki jakby zanik zdjęcia, da się to usunąć? aby było momentalne przejscie pomiedzy zdjęciami? Bez tego zaniku?

Początki animowania

Sat, 27 Jan 2018 16:27:26 +0000

Jestem uczniem więc nie mam za dużo czasu i chciałbym zrobić prostą kreskówkę animowaną. Czy długo będę uczył się robić animacje? Czy długo bym robił animacje 2d żeby powstał odcinek 15-20 minutowy? Załóżmy że głowne postacie mamy zrobione. Czy mógłbym zarabiać jakoś na tej kreskówce. Chodzi, żeby zarobić na niej w jakiś sposób na nowy komputer, tablet graficzny itd. a nie zostac milionerem z kreskówki :) . Jak można zarabiać to w jaki sposób? (yt odpada)

Funkcja frames dla własności animation-timming-function

Thu, 14 Dec 2017 16:54:39 +0000

Przyglądałem się animacjom css na MDN i podczas zgłebiania własnośi animation-timming-function zauważyłem, że można wykorzystać coś takiego jak frames(). Spróbowałem uruchomić to na moim poligonie testowym jednak zarówno chrome jak i mozilla krzyczą mi na coś takiego:

animation-timing-function: frames(10);

Invalid property value

Zastanawia mnie dlaczego tak jest. Na MDN nic nie pisali aby to była eksperymentalna technologia.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Animacja otwierania i zamykania aplikacji jak w IOS

Thu, 02 Nov 2017 14:01:23 +0000

Hej, tworzę odwzorowanie iphona w przeglądarce i potrzebuję stworzyć animację otwierania danej aplikacji tak jak to jest w IOS, czyli w momencie kliku na ikonkę to z tej ikonki jakby wychodzi (rozszerza się na cały ekran) widok aplikacji i w momencie zamykania chowa się (wchodzi) w tą ikonkę.
Przykład to dokładnie 0;26s filmiku : https://www.youtube.com/watch?v=uJy8g-xsGGk

Nie mam pomysłu jak stworzyć taką animację, serdecznie dziękuję za pomoc i pozdrawiam :)

Problem z jquery.viewportchecker.min

Fri, 29 Sep 2017 18:00:27 +0000

Witam

Zrobiłem animacje z wykorzystaniem animate.css oraz jquery.viewportchecker.min, jednak pojawił się problem, wcześniej wszystko ładnie działało a teraz nie działa, gdy scrolluje do np. kontakt to nie działa animacja fadeIn, w czym może być problem?

$(document).ready(function() 
{
	$('*[data-animate=fadeIn]').addClass('opacity').each(function() 
	{ 
		$(this).viewportChecker({classToAdd:'animated fadeIn',removeClass:'opacity',offset:100 }); 
	}); 
});

zatrzymanie animacji css

Mon, 28 Aug 2017 03:02:28 +0000

Na wstępie - jestem początkująca i mam problem z animacją. Animacja to 19 obrazków tworzących idącego kota, który na końcu siada... i tu jest problem. Chcę zrobić tak, żeby kot siedział, gdy animacja się zakończy. Aktualnie jest tak, że po zakończeniu animacji kot znika całkowicie.

Przy opcji animation-fill-mode: forewards -> po zakończeniu animacji pojawia się obrazek pierwszy (a żeby było tak jak chcę powinien pojawić się ostatni). Z góry dziękuje za pomoc!

kod:

#kot_pierwszy {
animation: bieg_kota 4s steps(19), droga_kota-1 4s forwards;
}

@-webkit-keyframes bieg_kota {
0% {background-position:0 0;}
100% {background-position:0 -3800px;}

}

@-webkit-keyframes droga_kota-1
{
0% {-webkit-transform:translateX(500px) scale(0.5);}

100% {-webkit-transform:translateX(225px) scale(0.5);}
}

</style>
</head>

</body>
</html>

Dziwne przycinanie animacji w css

Thu, 17 Aug 2017 21:09:53 +0000

Witam,dlaczego pojawia sie takie przycięcie mojej animacji wykonanej w css,oraz jak naprawic ten problem

https://codepen.io/DorianBajorek/pen/NvXBPj

Czy da się opóźnić powtórzenie się animacji w css

Sat, 22 Jul 2017 17:16:17 +0000

Witam. Mam pytanie. Mam animacje która się powtarza 2 razy. Po wczytaniu strony wysuwa obiekt, a podczas 2 powtórzenia chowa. I tutaj moje pytanie. Czy da się zrobić tak by przed schowaniem czyli drugim powtórzeniem aniumacji skrypt odczekał np. 5 sekund. Ponieważ wyświetla on błędy urzytkownika i chcę aby on zdążył je przeczytać, a nie ze skrypt ledwo co błąd wysunie to odrazu chowa

Wykonywalnosc dzialan gry

Thu, 18 May 2017 22:14:15 +0000

Cześć.
Nie dokonca wiem czy w odpowiednim dziale ale pytanko brzmi na jakiej zasadzie dzialaja gry tzn, chodzi mi dokladnie o animacje lub wykonywanie kodu.
Np gdy na jednej mapie buduje sie jakis dom (animacja jak powstaje) i wiesniak robie drzewo(animacja jak rabie) wykonywane sa w tej samej chwili. Czy jest to wielowatkowosc czy moze jakis inny trick,sposob na polaczenie kilku elementow wykonujacych sie niezalezenie od siebie w tym samym czasie?
dzieki za odpwowiedz.
Pozdrawiam.

System kreowania sprzedaży

Sun, 30 Apr 2017 13:08:32 +0000

Dzień dobry,

Chciałbym wyposażyć swoją stronę w podobny system wyceniania pracy na podstawie wybranych wartości atrybutów, oraz przedstawić je np. na samochodzie jak w poniższym linku:

http://pwj.net.pl/o-foliach/prezentacja-folii/folie-samochodowe-galeria.html

Jak coś takiego wykonać? Ewentualnie ktoś zna jakiś podobny tutorial przedstawiający wykoananie?

Z wyrazami szacunku,
Sebastian B.

Stworzenie scenki animowanej w Javie

Thu, 27 Apr 2017 15:44:13 +0000

Cześć, potrzebuję zrobić wyświetlaną scenkę w Javie (chodzące ludziki, zachodzące słońce - cokolwiek). Jednak nie wiem jak to najlepiej zrobić. Wiem, że można to zrobić w JavaFX czy w czystej Javie jednak nie mogę znaleźć żadnych poradników jak robić takie animację. Czy ktoś może mi polecić jakieś źródła danych czy pomoce, które by mi pomogły? Fajne by były poradniki krok po kroku, jednak skoro nic nie znalazłem to pewnie nie ma...

Animacje na stronie po zjechaniu scrollem

Thu, 13 Apr 2017 14:37:48 +0000

Witam. Jestem początkującym w programowaniu web ale interesuje mnie jak zrobić jakąs animacje, żeby zadziałała po zjechaniu na nią scrollem.

Np. w stopce mam jakąś animacje i chcę aby była ona aktywna jak dopiero tą stopkę zobaczę i nie trzeba będzie ani w nic klikać ani najeżdzać myszką. Nie pytam o samą animację, lecz wprawienie ją w ruch.

Czy da się animować innerHTML?

Wed, 01 Feb 2017 13:54:46 +0000

Drodzy forumowicze.

Mam pytanie, a mianowicie mam taką oto prostą linię kodu:

_("status").innerHTML = '<div class="sent-alert">Tekst, który ma się animować.</div>';

i chciałbym, aby pokazywanie tego diva się animowało. Czy jest możliwość zrobić coś takiego?

Pozdrawiam.

mam pytanie jak dodać funkcję żeby zatrzymywała animacje bo mi nie działa

Thu, 08 Dec 2016 20:23:31 +0000

<html lang="pl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Gra_przeglądarkowa</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="utf-8">
<style>
canvas{border:#666 1px solid;}
</style>
<script>
function m1(x,y)
{
	var canvas = document.getElementById('h1');
var c=canvas.getContext('2d');
c.save();
c.clearRect(0,0,550,400);
c.fillStyle="rgba(0,200,0,1)";
c.fillRect(x,y,50,50);
c.restore();
x+=1;
var loopTimer =setTimeout('m1('+x+','+y+')',30);

}
function stop1()
{

 window.stop(m1(x,y));
}
</script>
</head>
<body>

<button  onclick="m1(0,0)">Rysuj</button>
<canvas id="h1" width="500" height="500"></canvas>
<button onclick="stop1()">stop</button>
</body>
</html>

Animacje JS bez użycia processing.js

Tue, 01 Nov 2016 18:15:09 +0000

Cześć,

Chciałbym prosić o wskazówkę, jakich metod można użyć do zrobienia animacji w JS jakie są np. na tumblr po kliknięciu na 'serduszko' :D Łatwo coś takiego zrobić na płótnie z użyciem processing.js, ale domyślam się, że są lepsze sposoby na zrobienie podobnych efektów bez zaciągania "armaty, aby zabić komara" ;)

A jeśli się mylę i processing będzie do tego wskazany również proszę o sprostowanie.

Czy wie ktoś, gdzie znależć strony z filmikami animacjami na tło strony www ?

Thu, 06 Oct 2016 08:50:25 +0000

Prosiłbym o stronki (darmowe i jak i płatne) z animacjami i filmikami pod tło strony internetowej jeżeli można :)

Opóźnienie w dodawaniu klasy przez jQuery.

Wed, 21 Sep 2016 20:37:12 +0000

Dobry wieczór.

Mam taką funkcję jQuery:

$(document).ready(function() {
      $('.fadeInUp').addClass("hideAnimation").viewportChecker({
          classToAdd: 'showAnimation animated fadeInUp',
          offset: 170
         });
      });

i chciałbym, aby dodawanie tych klas było opóźnione.

Wiem, że jest to pewnie coś bardzo prostego, ale ja się z tym męczę od pół godziny i nie mogę znaleźć działającego rozwiązania.

Pozdrawiam.