Урок 34

Інструктаж з БЖД.Анімаційні ефекти 

Скрипт файл Index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Анімація</title>

</head>

<body>

    <div class="block1">


    </div>

    <div class="block2">


    </div>

    <div class="block3">


    </div>

</body>

</html>


Скрипт файлу style.css:

.block1

{

    width: 200px;

    height: 200px;

    background-color: blue;


}

.block1:hover

{

    background-color: green;

    transform: rotate(90);

    transition-duration: 1s;

    border-radius: 50%;

}

.block2

{

    width: 200px;

    height: 200px;

    background-color: yellow;

    transition-duration: 5s;

    transform: scale(0.80);

   

}

.block2:hover

{

  transform: scale(1);  

}

.block3

{

    width: 200px;

    height: 200px;

    background-color: black;

    margin: 30px auto;

    animation-name: spin;

    animation-duration: 4s;

    animation-timing-function: linear;

    animation-iteration-count: 4;

    animation-direction: alternate;

}

@keyframes spin{

    0%{transform: rotate(0);}

    25%{background-color: green;}

    100%{transform: rotate(360deg);}

}



Очікувані результати: учні знають, які графічні об’єкти можна використовувати на слайдах презентації, розуміють поняття «анімація слайда», «анімація об’єкта слайда» в презентації; вміють додавати анімаційні ефекти до слайда та його об’єктів.

Мета: актуалізувати знання учнів про графічні об’єкти, які можна використовувати на слайдах презентації; з’ясувати поняття «анімація слайда», «анімація об’єкта слайда» в презентації; навчити додавати анімаційні ефекти до слайда та його об’єктів; розвивати логічне мислення; формувати вміння діяти за інструкцією, планувати свою діяльність, аналізувати i робити висновки; виховувати інформаційну культуру учнів, уважність, акуратність, дисциплінованість.

Обладнання та наочність: комп’ютери, підручники, презентація, проєктор.

Хід уроку

І. Організаційний та мотиваційний етап

Всі сідайте тихо, діти,

Домовляймось не шуміти,

На уроці не дрімати,

А старанно працювати.

Сьогодні на уроці ми з вами:

IІ. Актуалізація знань учнів

Демонстрація навчальних слайдів.

ІІІ. Усвідомлення набутих знань й формування вмінь та навичок

Увага! Під час роботи з комп’ютером дотримуйтеся правил без­пеки та санітарно-гігієнічних норм. 

ІV. Рефлексія й підсумок навчальної діяльності