Как сделать геометрический фон на сайт?
Когда-то хотел себе поставить вот такой геометрический сменяемый фон . Чтож... это время пришло!
Подробно о геометрическом фоне
- Геометрический фон(по умолчанию) Пример по умолчанию
- Геометрический фон(dwweb.ru)
- Подключение к сайту геометрического фона...
Скачать
Геометрический фон(по умолчанию)
Для того, чтобы сделать такой геометрический фон на странице нам потребуется:
Нам потребуется css:
Еще нам потребуется подключить jquery
Подключаем скрипт :
Запускаем скрипт...
$(function() {
materialBackground.start();
});
</script>
Теперь... соберем всю страницу для геометрического фона:
Код простой страницы для геометрического фона.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>material_background_default</title>
<script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://dwweb.ru/__a-data/__all_for_scripts/__examples/jquery/sluchaynyiy_geometricheskiy_fon/material-background-styles.css">
</head>
<body>
<div id = "material-background"></div>
<script src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/jquery/sluchaynyiy_geometricheskiy_fon/material-background-scripts.js"></script>
<script>
$(function() {
materialBackground.start();
});
</script>
</body>
</html>
Скачать material_background_default:
Скачать material_background_defaultГеометрический фон(dwweb.ru)
Я немного решил позволить вольностей с полученным геометрическим фоном из интернета...
Теперь... достаточно подключить два скрипта.
Теперь... подключить jquery - вы можете даже не подключаться... можете брать данный скрипт с нашего сайта
Далее... нужно подключить лишь второй скрипт(аналогично, что и с первый скриптом... можете брать с нашего сайта.) :
В скрипт добавлено плавное появление, см. class slowly
Насыщенность заднего фона - "body:after" - сейчас "opacity: 0.8;"
+ блок "example" для примера текста...
Соберем весь геометрически фону:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>
<script src="https://dwweb.ru/js/geometric_background_dw.js"></script>
<style>
.example {
font-family: system-ui;
background: #8f8f8f59;
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 464px !important;
height: 100px;
border: 1px solid #747474;
transform: translate(-50%,-50%);
min-width: 320px;
text-transform: uppercase;
font-weight: 100;
font-size: 30px;
line-height: 94px;
box-shadow: 0 10px 20px -5px rgb(0 0 0 / 40%);
}
</style>
</head>
<body>
<div class="example">
material-background
</div>
</body>
</html>
Результат геометрического заднего фона:
Скачать текст_ссылкиparagraph_material_background_on
Подключение к сайту геометрического фона...
Ну и давайте подключим "геометрический фон"(мой вариант) к странице прямо здесь:
Некоторые блоки выглядят не очень, но ведь это всего лишь пример!
Все тоже самое, что и во втором пункте.
Сверху вы увидели, как включать/отключать "геометрический фон"... давайте разберем этот вариант...
Опять нам надо ...подключить jquery
<form method="post">
<input name="on" type="submit" value="Включить на всей странице" class="width_100">
</form>
<form method="post">
<input name="off" type="submit" value="Отключить" class="width_100">
</form>
В теге head
if($_SESSION[background])
{
echo '<script src="https://dwweb.ru/js/geometric_background_dw.js"></script>';
}
?>
<?
function refresh(){ return (exit('<meta http-equiv="refresh" content="0; url=">'));}
if ($_POST[on])
{
$_SESSION[background] =1; refresh();
}
if ($_POST[off])
{
$_SESSION[background] =''; refresh();
}
?>