Главная » Web и Технологии » Гирлянда на JS и CSS

Гирлянда на JS и CSS

Расстояние ничего не портит. Разница в возрасте ничего не портит. Мнение родителей ничего не портит. Всё портят люди. Сами.

262 0

11-ноября-2022, 21:19   Web и Технологии

Гирлянда на JS и CSS

Приветствую всех гостей нашего портала. Копался в поисках новогодних украшений для сайта, нашёл гирлянду для сайта. Гирлянда работает при помощи CSS и JS. И так для начала размещаем HTML код в нужном месте сайта.

HTML

<div id="garland">
<img src="/uploads/web/1.png">
<img src="/uploads/web/2.png">
<img src="/uploads/web/3.png">
</div>


Далее добавляем оформление.

CSS

<style>
#garland {
position: relative; 
background: url(https://lenger.kz/uploads/web/girland.png);
background-color: #000;
background-size: 100%;
width: 500px;
height: 250px;
}

#garland img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity 1s;
}
</style>



Заключительная фаза скрипт.

JS

<script>
setInterval(function () {
var imagesArray = [].slice.call(document.querySelectorAll("#garland img"));
imagesArray.forEach(function (img) {
img.style.opacity = Number(Math.random() > 0.5);
});
}, 1000);
</script>

 Вы можете на своё усмотрение менять те или иные параметры под ваши нужды. 

Всех с наступающими зимними праздниками!!!


Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Человек быстро решит загадку пять умножить на пять и минус 25 ?