CodePen — невероятно полезный ресурс с огромным количеством интересных скриптов, легко интегрируемых на сайт. Он занимает первое место в Google по соответствующему запросу, предлагая обширную коллекцию готовых решений из HTML, CSS и JavaScript. Эти решения, называемые «Pens», представляют собой функциональные элементы, например, анимированный восход солнца.
Использование CodePen
CodePen содержит множество «Pens» — файлов с кодом на HTML, CSS и JavaScript. Некоторые «Pens» используют только CSS и HTML, что упрощает их использование. Сайт интуитивно понятен и предлагает большой выбор скриптов.
Встраивание кода CodePen на сайт
Рассмотрим встраивание анимации горного пейзажа. Понадобятся файлы:
- index.html — основной HTML-файл
- myfolder/style.css — файл стилей CSS
- myfolder/mountains.js — файл со скриптом JavaScript
- Создание файлов: Создайте указанные файлы.
- Копирование HTML-кода: Найдите на CodePen нужный скрипт. Скопируйте весь HTML-код из раздела HTML «Pens». Вставьте его в тег <body> файла index.html, добавив <title> для заголовка страницы и метатег <meta charset=»UTF-8″> для корректного отображения символов.
- Встраивание CSS: На CodePen нажмите «View Compiled CSS», скопируйте скомпилированный код и вставьте его в style.css. Подключите style.css к index.html с помощью <link>:
<link rel="stylesheet" type="text/css" href="myfolder/style.css">- Встраивание JavaScript: Скопируйте JavaScript-код из раздела JS «Pens» и вставьте его в mountains.js. Подключите mountains.js в конце index.html, после тега <body>:
<script src="myfolder/mountains.js"></script>Важно: нескомпилированный CSS-код работать не будет.
Результат
После выполнения шагов, сайт будет отображать выбранный скрипт (в примере — анимированный горный пейзаж). Такие скрипты подходят для оформления страницы 404, добавляя визуальной привлекательности.
CodePen — мощный инструмент для веб-разработчиков. Он предоставляет огромную коллекцию готовых скриптов для создания красивых и функциональных веб-сайтов. Не забывайте компилировать CSS-код. Изучение CodePen принесёт множество вдохновения и готовых решений.