4

У меня есть такая анимация облаков:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(https://picsum.photos/2000/1000) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.banner .clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner .clouds img {
  position: absolute;
  bottom: 0;
  animation: animate calc(8s * var(--i)) linear infinite;
}

@keyframes animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

section {
  padding: 50px 0;
}

section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}
<div class="banner">
  <div class="clouds">
    <img src="https://lh3.googleusercontent.com/HYOFIdSEozedbPcCO08K_ksED3OL4r8VeVbSvlWNerPtzykQxc-l1f_0Q7LvEm874Xszt04wqKdMpedVv0zIanR7BkWuYijyphP0rU5npsPY8qjcJaDUjwWo74GEfk5sWZrmGTBc8uB94HaRV6rbbiKjZxef5_nQu-4BykY_MU4_Tcejwb77aY36AN1IUu9K2ZF2rvedSh0VglhZTytvXCt4NU5AE4AUYu6As3DYkJG-f7hMNOWF03irvYTLMy_MmXFn-6WjVyedVQ6NMO7wY85_nMbu2OVdzQ-7DBXP9IQiue2RRQQ6hQSTQXGudgYPKp_AiaK__JWDsfjgls40qZGkEOx1pri36HuWdDSAEZ9Ph8qWl9VuFugquHanSctyjFOp5-3xNagxvzpVmfu_vt8tmCzasKfr9F0MUQTfmy6WimG6ViSt_KO_fOTb25CruzFZujvCL3At7JsAz4MAfz8dazhCeVVJJp3hwz5wuJS5Yd1Qn9CX_KOlmlXc2pS7zS88_S2Zs8znFfSCfUryZr92JZyUGYuJ6Vni8chKGEO4g13OOG-dn9t5Qetk-S_SiCqCrrBbWrJLHDICMb7wC1pc_rd3LBUk2n08Y5P1CJa-hhzbUHM-j0650CyCXcezF0HgRK86agV1WMTklCl1UwAwlatYWrNcyl_07IQ0hMnjn1K9_BQeoLVnSC5XQIanIbnA=w1919-h947-ft"
      style="--i:1">
    <img src="https://lh3.googleusercontent.com/5mvan3wmp-w1vWlq8c9Jv_dlU7HTNpdrayWJm5Cjm6Z9i2znsG9nE1GCZ4gk5m6cxZcEq3IQ5z5mhiAc_MEWLQpoJMZcE9VNqZJCxUD-85NAKHbHFFLGZHbiCJPAcTMT7qiBOXP490NQ2nVXG6wYVnN6Ry5sY4jhSpAD05UDKuqeH1a1otp2kEGWV8_DhW80Qk3GxPQ65tXsHSl975O8CacDqv4lOCC0ZMvVavluryPOIIjOzB_zCa3GEwyVnOvFdre7IRkWur-Cytxtpbrhqaybs_GL2_H5X-7wj0b3ryNsCFQyrRrvrIQZP0DIS8QDyj_HmDlzUBPa4WKPH6bn3RdDawE7OLCncHMd8bGHHnzb6anhU5iXnmsQPliNlzPhnpsbNUzCcFRH6wZ4u-ilYJcIL1J8vNPeAlhq-SjNiYKEe-n1BmijrdC-arH8vwGhQYz_GrIOznmDoxq8q0oRhDpktyw7GtGNIqdE9OoFz_emC97xz8EQ7XsfdKve_BVMy8lxXnEe8Kdbw6E0_a9bIHIajzuElyNqejXCW6yZnz45VHfzKyLGraN06JCQGYbSKMUCbk3maoVxccjb38NjfZVb4m3Zu571dW8-4KeIWdVoWRFe4Iw8l_sb5YD4MbZ_M3X277Ctp1CL21H4HlsJTtWbqnuBYUUoyTJpcm8vigM4uWYN5e71yl6aDCdjbGu6l-_D=w1919-h947-ft"
      style="--i:2">
    <img src="https://lh3.googleusercontent.com/3I_RWn8GmvbZk-rRJx0-AQNld6WowOKrLP-FPffpWTo--TQwBgT3aUikrsupsFEtl86cuohBlhUXY7PIPkXZTVqXxy7HdSc-cugH9fGJinNQchJFaWhKDPXBK-XZhFOGGemcBh8zddI4e1OVXAv2YwXTYxMCXsOO8AxGvYJHYL8r4eHokxV0ZC_et5cU21c3HlWjZK-R6QCNFU21hkacNRczBbQ2JCPrfoRbo3dFm1y2Ibczl326ExcTzrUVY7y4AtBjFuNJW195rbajdwGSBBKxfcymVHmQ9j5owovdX5lrGjIm2BYTfs4uMDwPKOh6hIVaAo8jCqkAjGd9shiJxnDUuClYYq6JcwKGBTyDsftMTaDWtKJbGy3ayT6cZ_OmlvafkrsNfAaPu1yTFVWWMcaRij8yZTO74S5qQzNiQAiugD8_Mfn5lobl1kI8Q6ZfV6nMVLFGYPXiR2dw-l-BcyYu6-G-PCuk1TXx1w9BLZnuMLnh30pzJGbxL_YI2zk1B__mwbt_Olzl98gmQRGB6H5FH0vuRqkqv9zjszJI-44aJUHELFawUBAZNxdYEGss26iTGeDL_zHtn2-QBgfa1WGrAXqVZio8IaE6LvXz1jnoPmT_CLEs1ZHJXxlIxnbYiSt53oa-7GI9hoqULUqfQzVtjE0wjpbU-GaJjGO-TNQq4ffUh5rHRzYZFQVX9m7nhqGn=w830-h947-ft"
      style="--i:3">
    <img src="https://lh3.googleusercontent.com/uLultoDSQUnW41gQzV3Y1ZUv-iHApQ_jVcvn6_sAOAWTYdHxk1VBGRIC-PVZXk7woUc0Q0AErWMNqTf5IGc0VLY_U2lrvFTKE8ic2mLafQOCLRSv9qiwic5NE1qrqYMpO5_Kbx9gfVS6PduQtx1SX_nm7BjyLJpW_0cXRaMR9r-4XilrILw3wQD7jmSAQGJzdNS_VWyIFHIa7GaGyDHLFMD06q_WCVWhd7i0H3EvT35-HMa9eGP_jYJPOBlGJSSvw_ht1jTCXo8AXY-yYeRnbj5smEQGj6AHvscrETYTLh9PJhy7iJ9YQKknvxGPn4Za3ZFM0do_FvQ-bogDMn3G6WrkZ8Q9UAyOfU_OlLOkDs4h0tkklpuZOMLhiHWnq9lh9P7APgpxFiqodDY5MOEtl8Lweli3ca2IvyweQgEuQ4VNL3A1csVwiMd8ufGWPzsdJFUuVSzY-NE9VojmNO5CpvQ91K2sLQZVQCIRJIcRwgTsIgd6zS7Xwlgtwmdbx-4RsWbU_nRl5YebyDf1hENT9-epY8Jyy-Vk87QeydXIL2oqrRhtyaMAgciSBSlyow12ElD_pl58Kz7_9OfluLzqy7wcL0EkM62GltYubrhyFKKlIefcIqjbIaNYyKlVHoqmKyz1cy4Xy4e5PwNYlhiifYwifWCz51ydeRaUwnxtyZCMq4kVzi_wqGb2qa1GuXJDFNbu=w830-h947-ft"
      style="--i:4">
    <img src="https://lh3.googleusercontent.com/ovV6xb41xzr9EOIQPqKbh-F33WmvxLOM9Af1gmJBYUmwLaB-fjc_O_6Ld19lOM4MfVf4Xcmouj1uPXJB4nFmRk3bv49cjB93qOZYKtXKQYySsaYwwYtivM3EA3UHCIIYEkca6TKGUHdC4_piEIsRTk40XPrRlhjQlodvvNXRI8A5h4agIbKyURemWfReUMColrBYlxHHAlTuUlx8uDe1_l2OhXq2mFfeb-FZ_iJGNyjZ3Rh4GpqCY0yPqItye92kwuWzM2e4K3OPQFukkyFmaH30nYYYFMc24pCOStFcL7Xzz1KbfitFs9DEh0l74wkrJW4qpic-P4vVgYpKh11f7wpmRj5W2KQRnibnq4jz3Rh-NxKTuF8RZW7x_0C9xp0tg0NWV7wZKJtiQ28mtwd_4X1oRRznk4Ron_8mpyCRf98nf5B8PpLh8XJNyCE4lUOihEKYRvO-6zrxOQ244GbHLS0SPNbNk5by6ji5TjB-yt21z7iag4XbtQZSpYXMqeI2bGl-znOGZAeAwAKiO_0BAPh3YQQC5NKHAGRcmsvUI0aXZRcR0hrfc8YfZ6JJ_tFDLHEdDFCS_H-em3LTbnXjjNaaLeHUmWg2geqACPjllaytmKL2g8UNTXtwhlPUXumBF1ZicDDsiP6pavWxiWmFJHKgBlt3Xb1xihnbfynu5ndjyTx0xFSZnmskE3ZRdpwUBt0U=w830-h947-ft"
      style="--i:5">
  </div>
</div>

<section>
  <div class="container">
    <h2>CSS Cloud Banner Animation Effects</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam asperiores inventore laudantium ea! Deserunt repudiandae quas ex. Velit accusantium ratione voluptas saepe repellat. Ducimus blanditiis dolorem, inventore similique aspernatur.
    </p>
  </div>
</section>

Но есть проблема, когда ты переходишь на другую ссылку в браузере, а потом во вкладку с облаками, они делают резкий рывок, что очень неприятно, как от этого избавиться?

2 ответа 2

0

Походу тебе надо стартовать анимации этих облаков, только после того как все img загрузились.(и не раньше) тогда скачков не должно быть. Отслеживай через JS загрузку изображения, и если ок, то добавляй класс который будет запускать анимацию. По умолчанию картинки не анимируй

image.onload = function(){
//display ok addClass ....}
3
  • Тогда анимация начнётся заново, да? 12 апр 2020 в 21:43
  • не, идея в том, что б не запускать анимации, пока картинок нету в браузере клиента. У тебя браузер старается "догнать" тайминг анимации и показать пользователю что там происходило 14 апр 2020 в 15:39
  • Не работает так, сделал ответ и я не понимаю как написать условие, типа: если объект не загружен то делай это, иначе это 14 апр 2020 в 16:03
0

@BlackStar1991 всё также происходит

const images = document.querySelectorAll('.clouds img');
images.forEach((elem, i) => {
  elem.addEventListener('load', () => {
    const str = `animate ${8*(i+1)}s linear infinite`;
    elem.style.animation = str;
  });
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(https://picsum.photos/2000/1000) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.banner .clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner .clouds img {
  position: absolute;
  bottom: 0;
}

@keyframes animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

section {
  position: relative;
  padding: 50px 0;
}

section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}
<div class="banner">
  <div class="clouds">
    <img src="https://lh3.googleusercontent.com/HYOFIdSEozedbPcCO08K_ksED3OL4r8VeVbSvlWNerPtzykQxc-l1f_0Q7LvEm874Xszt04wqKdMpedVv0zIanR7BkWuYijyphP0rU5npsPY8qjcJaDUjwWo74GEfk5sWZrmGTBc8uB94HaRV6rbbiKjZxef5_nQu-4BykY_MU4_Tcejwb77aY36AN1IUu9K2ZF2rvedSh0VglhZTytvXCt4NU5AE4AUYu6As3DYkJG-f7hMNOWF03irvYTLMy_MmXFn-6WjVyedVQ6NMO7wY85_nMbu2OVdzQ-7DBXP9IQiue2RRQQ6hQSTQXGudgYPKp_AiaK__JWDsfjgls40qZGkEOx1pri36HuWdDSAEZ9Ph8qWl9VuFugquHanSctyjFOp5-3xNagxvzpVmfu_vt8tmCzasKfr9F0MUQTfmy6WimG6ViSt_KO_fOTb25CruzFZujvCL3At7JsAz4MAfz8dazhCeVVJJp3hwz5wuJS5Yd1Qn9CX_KOlmlXc2pS7zS88_S2Zs8znFfSCfUryZr92JZyUGYuJ6Vni8chKGEO4g13OOG-dn9t5Qetk-S_SiCqCrrBbWrJLHDICMb7wC1pc_rd3LBUk2n08Y5P1CJa-hhzbUHM-j0650CyCXcezF0HgRK86agV1WMTklCl1UwAwlatYWrNcyl_07IQ0hMnjn1K9_BQeoLVnSC5XQIanIbnA=w1919-h947-ft">
    <img src="https://lh3.googleusercontent.com/5mvan3wmp-w1vWlq8c9Jv_dlU7HTNpdrayWJm5Cjm6Z9i2znsG9nE1GCZ4gk5m6cxZcEq3IQ5z5mhiAc_MEWLQpoJMZcE9VNqZJCxUD-85NAKHbHFFLGZHbiCJPAcTMT7qiBOXP490NQ2nVXG6wYVnN6Ry5sY4jhSpAD05UDKuqeH1a1otp2kEGWV8_DhW80Qk3GxPQ65tXsHSl975O8CacDqv4lOCC0ZMvVavluryPOIIjOzB_zCa3GEwyVnOvFdre7IRkWur-Cytxtpbrhqaybs_GL2_H5X-7wj0b3ryNsCFQyrRrvrIQZP0DIS8QDyj_HmDlzUBPa4WKPH6bn3RdDawE7OLCncHMd8bGHHnzb6anhU5iXnmsQPliNlzPhnpsbNUzCcFRH6wZ4u-ilYJcIL1J8vNPeAlhq-SjNiYKEe-n1BmijrdC-arH8vwGhQYz_GrIOznmDoxq8q0oRhDpktyw7GtGNIqdE9OoFz_emC97xz8EQ7XsfdKve_BVMy8lxXnEe8Kdbw6E0_a9bIHIajzuElyNqejXCW6yZnz45VHfzKyLGraN06JCQGYbSKMUCbk3maoVxccjb38NjfZVb4m3Zu571dW8-4KeIWdVoWRFe4Iw8l_sb5YD4MbZ_M3X277Ctp1CL21H4HlsJTtWbqnuBYUUoyTJpcm8vigM4uWYN5e71yl6aDCdjbGu6l-_D=w1919-h947-ft">
    <img src="https://lh3.googleusercontent.com/3I_RWn8GmvbZk-rRJx0-AQNld6WowOKrLP-FPffpWTo--TQwBgT3aUikrsupsFEtl86cuohBlhUXY7PIPkXZTVqXxy7HdSc-cugH9fGJinNQchJFaWhKDPXBK-XZhFOGGemcBh8zddI4e1OVXAv2YwXTYxMCXsOO8AxGvYJHYL8r4eHokxV0ZC_et5cU21c3HlWjZK-R6QCNFU21hkacNRczBbQ2JCPrfoRbo3dFm1y2Ibczl326ExcTzrUVY7y4AtBjFuNJW195rbajdwGSBBKxfcymVHmQ9j5owovdX5lrGjIm2BYTfs4uMDwPKOh6hIVaAo8jCqkAjGd9shiJxnDUuClYYq6JcwKGBTyDsftMTaDWtKJbGy3ayT6cZ_OmlvafkrsNfAaPu1yTFVWWMcaRij8yZTO74S5qQzNiQAiugD8_Mfn5lobl1kI8Q6ZfV6nMVLFGYPXiR2dw-l-BcyYu6-G-PCuk1TXx1w9BLZnuMLnh30pzJGbxL_YI2zk1B__mwbt_Olzl98gmQRGB6H5FH0vuRqkqv9zjszJI-44aJUHELFawUBAZNxdYEGss26iTGeDL_zHtn2-QBgfa1WGrAXqVZio8IaE6LvXz1jnoPmT_CLEs1ZHJXxlIxnbYiSt53oa-7GI9hoqULUqfQzVtjE0wjpbU-GaJjGO-TNQq4ffUh5rHRzYZFQVX9m7nhqGn=w830-h947-ft">
    <img src="https://lh3.googleusercontent.com/uLultoDSQUnW41gQzV3Y1ZUv-iHApQ_jVcvn6_sAOAWTYdHxk1VBGRIC-PVZXk7woUc0Q0AErWMNqTf5IGc0VLY_U2lrvFTKE8ic2mLafQOCLRSv9qiwic5NE1qrqYMpO5_Kbx9gfVS6PduQtx1SX_nm7BjyLJpW_0cXRaMR9r-4XilrILw3wQD7jmSAQGJzdNS_VWyIFHIa7GaGyDHLFMD06q_WCVWhd7i0H3EvT35-HMa9eGP_jYJPOBlGJSSvw_ht1jTCXo8AXY-yYeRnbj5smEQGj6AHvscrETYTLh9PJhy7iJ9YQKknvxGPn4Za3ZFM0do_FvQ-bogDMn3G6WrkZ8Q9UAyOfU_OlLOkDs4h0tkklpuZOMLhiHWnq9lh9P7APgpxFiqodDY5MOEtl8Lweli3ca2IvyweQgEuQ4VNL3A1csVwiMd8ufGWPzsdJFUuVSzY-NE9VojmNO5CpvQ91K2sLQZVQCIRJIcRwgTsIgd6zS7Xwlgtwmdbx-4RsWbU_nRl5YebyDf1hENT9-epY8Jyy-Vk87QeydXIL2oqrRhtyaMAgciSBSlyow12ElD_pl58Kz7_9OfluLzqy7wcL0EkM62GltYubrhyFKKlIefcIqjbIaNYyKlVHoqmKyz1cy4Xy4e5PwNYlhiifYwifWCz51ydeRaUwnxtyZCMq4kVzi_wqGb2qa1GuXJDFNbu=w830-h947-ft">
    <img src="https://lh3.googleusercontent.com/ovV6xb41xzr9EOIQPqKbh-F33WmvxLOM9Af1gmJBYUmwLaB-fjc_O_6Ld19lOM4MfVf4Xcmouj1uPXJB4nFmRk3bv49cjB93qOZYKtXKQYySsaYwwYtivM3EA3UHCIIYEkca6TKGUHdC4_piEIsRTk40XPrRlhjQlodvvNXRI8A5h4agIbKyURemWfReUMColrBYlxHHAlTuUlx8uDe1_l2OhXq2mFfeb-FZ_iJGNyjZ3Rh4GpqCY0yPqItye92kwuWzM2e4K3OPQFukkyFmaH30nYYYFMc24pCOStFcL7Xzz1KbfitFs9DEh0l74wkrJW4qpic-P4vVgYpKh11f7wpmRj5W2KQRnibnq4jz3Rh-NxKTuF8RZW7x_0C9xp0tg0NWV7wZKJtiQ28mtwd_4X1oRRznk4Ron_8mpyCRf98nf5B8PpLh8XJNyCE4lUOihEKYRvO-6zrxOQ244GbHLS0SPNbNk5by6ji5TjB-yt21z7iag4XbtQZSpYXMqeI2bGl-znOGZAeAwAKiO_0BAPh3YQQC5NKHAGRcmsvUI0aXZRcR0hrfc8YfZ6JJ_tFDLHEdDFCS_H-em3LTbnXjjNaaLeHUmWg2geqACPjllaytmKL2g8UNTXtwhlPUXumBF1ZicDDsiP6pavWxiWmFJHKgBlt3Xb1xihnbfynu5ndjyTx0xFSZnmskE3ZRdpwUBt0U=w830-h947-ft">
  </div>
</div>

<section>
  <div class="container">
    <h2>CSS Cloud Banner Animation Effects</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam asperiores inventore laudantium ea! Deserunt repudiandae quas ex. Velit accusantium ratione voluptas saepe repellat. Ducimus blanditiis dolorem, inventore similique aspernatur.
    </p>
  </div>
</section>

1
  • Можешь, ещё попробовать отслеживать событие когда пользователь покидаем страницу window.onblur = function () {document.title='документ неактивен'} и подключить на это событие паузу для всей анимации, а когда вернется, опять play 15 апр 2020 в 16:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.