СКРИПТЫ
ТЕГИ:
php (284)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
atom (20)
online (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
php file (16)
html book (16)
js method (16)
color (15)
input (15)
php date (15)
link (15)
js events (14)
htaccess (13)
table (13)
osclass (13)
dw block (12)
path (12)
js delete (12)
select (12)
icon (11)
form (11)
notepad (11)
download (11)
img (11)
php time (11)
keyboard (11)
php img (11)
jsphp (11)
mouse (10)
url (10)
js time (9)
info (9)
yandex (9)
php url (7)
comment (7)
cookie (7)
hover (7)
task (7)
dosite (7)
js url (6)
list (6)
iframe (6)
click (6)
year (6)
mysql (6)
search (5)
ftp (5)
chart (5)
browser (5)
js id (5)
mb (5)
php get (5)
heading (5)
adminka (5)
value (5)
symbols (4)
vk (4)
js form (4)
console (4)
mounth (4)
submit (4)
reg.ru (4)
bbcode (4)
day (4)
week (4)
captcha (3)
js img (3)
ucoz (3)
line (3)
ssl (3)
scandir (3)
pages (3)
js post (3)
https (3)
vs code (3)
padding (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
typeof (2)
seo (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
js vars (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
height (2)
details (2)
archive (1)
numbers (1)
domen (1)
books (1)
куб (1)
scroll (1)
smile (1)
header (1)
windows (1)
google (1)
speed (1)

Как сделать геометрический фон на сайт?

"Как сделать геометрический фон на сайт?" Найдено давно, в сети.
Когда-то хотел себе поставить вот такой геометрический сменяемый фон . Чтож... это время пришло!

Подробно о геометрическом фоне

  1. Геометрический фон(по умолчанию)
  2. Пример по умолчанию
    Скачать
  3. Геометрический фон(dwweb.ru)
  4. Подключение к сайту геометрического фона...

  1. Геометрический фон(по умолчанию)

    Смотрим геометрический фон по умолчанию.

    Для того, чтобы сделать такой геометрический фон на странице нам потребуется:

    css

    Нам потребуется css:

    jquery

    Еще нам потребуется подключить jquery

    jquery code

    Подключаем скрипт :

    Запускаем скрипт...

    <script>
    $(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


  2. Геометрический фон(dwweb.ru)

    Я немного решил позволить вольностей с полученным геометрическим фоном из интернета...

    Теперь... достаточно подключить два скрипта.

    Теперь... подключить jquery - вы можете даже не подключаться... можете брать данный скрипт с нашего сайта

    <script src="https://dwweb.ru/js/jquery-3.3.1.min.js"></script>

    Далее... нужно подключить лишь второй скрипт(аналогично, что и с первый скриптом... можете брать с нашего сайта.) :

    <script src="https://dwweb.ru/js/geometric_background_dw.js"></script>

    В скрипт добавлено плавное появление, см. 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>

    Результат геометрического заднего фона:

    Скачать текст_ссылки


  3. paragraph_material_background_on

    Подключение к сайту геометрического фона...

    Ну и давайте подключим "геометрический фон"(мой вариант) к странице прямо здесь:

    Некоторые блоки выглядят не очень, но ведь это всего лишь пример!

    Все тоже самое, что и во втором пункте.

    Как включать выключать геометрический фон?

    Сверху вы увидели, как включать/отключать "геометрический фон"... давайте разберем этот вариант...

    Опять нам надо ...подключить jquery

    Форма html :

    <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>

    Php :

    В теге head

    <?
    if($_SESSION[background])
    {
    echo '<script src="https://dwweb.ru/js/geometric_background_dw.js"></script>';
    }
    ?>

    Php до тега <!DOCTYPE>

    <?
    function refresh(){ return (exit('<meta http-equiv="refresh" content="0; url=">'));}
    if ($_POST[on])
    {
    $_SESSION[background] =1; refresh();
    }

    if ($_POST[off])
    {
    $_SESSION[background] =''; refresh();
    }
    ?>

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
геометрический фон
Как сделать геометрический фон на сайт?
jquery background geometric
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.020099 секунд. Подробнее