Эффект стопки (пачки) фотографий на JavaScript

Сегодня мы делаем красивый эффект стопки (пачки) фотографий на JavaScript. Думаю вы все видели красивые фото, где polaroid снимки брошены пачкой на стол в интересном беспорядке. Давайте попробуем сделать подобное на JS. Стартуем:

Стартовый проект

Стандартно, файл index.html, script.js и style.css, плюс папка images, где я буду складывать фотографии. Изображения я скачал из интернета - это обои для рабочего стола. В html файле создадим разметку следующего вида:


<div class="container">
    <div class="cover">
    </div>
</div>

где container - это просто блок выравнивания для кода, а внутри cover - и будет происходить магия.

Добавим стили в style.css


* {
    box-sizing: border-box;
}

.container  {
    max-width: 800px;
    margin: 50px auto;
    text-align: center;
}

.cover {
    padding: 30px;
    border: 1px solid #c0c0c0;
    min-height: 400px;
    position: relative;
}

.card {
    width: 80%;
    height: 80%;
    box-shadow: 3px 3px 5px #333;
    position: absolute;
    transition: all ease 2s;
    left: 10%;
    top: 15%;
}   

.go {
    left: -99999px;
}

где card - это классы для наших будущих изображений.

Генерируем изображения в JavaScript

для начала в script.js создадим исходные данные


const img = [
'autumn-219972_1280.jpg',
'california-1751455_1280.webp',
'fantasy-3077928_1280.webp',
'feather-3010848_1280.webp',
'pexels-photo-1402787.jpeg',
'pexels-photo-853199.jpeg'
];

let count = img.length;
const cover = document.querySelector('.cover');

это переменные с которыми мы будем работать. Массив img - содержит имена всех изображений в папке. Count - вспомогательная переменная, cover - блок куда будем выводить изображения.

Напишем функцию init, которая будет 1. Создавать блоки div, добавлять в них свойство background - наше изображение, добавлять класс card, и выводить созданный div в cover.

Обратите внимание, я использую две вспомогательные функции - shuffle, которая перемешивает массив, и randInt которая генерирует случайное число в указанном диапазоне.

Получаем код:


function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
}

function randInt(min, max) {
    // случайное число от min до (max+1)
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
}

function init() {
    shuffle(img);
    for (let i = 0; i < img.length; i++) {
        let card = document.createElement('div');
        card.classList.add('card');
        card.style.background = `url('./images/${img[i]}')`;
        card.style.backgroundSize = 'cover';
        card.style.transform = `rotate(${randInt(-15, 15)}deg) translate(${randInt(-40, 40)}px, ${randInt(-40, 40)}px)`;
        cover.append(card);
    }
}

init();

cover.addEventListener('click', event => {
    if (event.target.classList.contains('card')) {
        event.target.classList.add('go');
        count--;
    }
    if (count == 0) {
        /**
            * удалить все card
            */
        init();
        count = img.length;
    }
});

Ну и добавим возможность вылета изображений по клику - т.е. кликнули и изображение вылетает за край экрана.

Обратите внимание! Код требует доработки. После вылета - изображения не удаляются. Поэтому после круга - нужно дописать код, который получит все div с изображениями и удалит их, а потом заново вызовет init.

Как обычно скачать код можно здесь!. Удачного кодинга и изучения JavaScript.

Еще статьи

Следи за новостями курсов на нашем канале

Открыть

Правила оформления домашних заданий

Открыть

Форум по задачам

Forum