Archives September 2022

Tutorial How to Create a Hidden Search Form With Jquery

Every dynamic website requires a search form, this search form is very useful to make it easier for visitors to find the writing they want quickly.

Every website has a unique and different design, there are times when a designer is confused about where to place the search form because of the lack of space or the absence of a suitable place to put fields to type keywords. So now it is very trending that the search form is hidden and only displays the search icon (magnifying glass). When the icon is clicked, the form will appear and visitors can type keywords there.

expanding dropdown form search

In this tutorial we will try to model a search form like that.

Creating HTML Structure
First we will create the HTML structure first, here I will only write the header section so you don’t get confused, because the other parts are only complementary.

TWD

Web Design & Development Indonesia

Menu and Form
It can be seen that we use the fa-search fa-4x class to display the search icon, which is wrapped in a div with the ID #searchtoggl. In order for the icon to appear, we must first include the css code from the awesome font in the head section of the website. You can read about the use of this awesome font briefly in the article Writing Icons for Website Design.

Beautify With CSS
So that the display looks attractive, we certainly need a css script, here we will only highlight code snippets from the search form and the menu, because that is the most important part to form the appearance of the hidden search form.

header{
padding: 20px 30px;
overflow: hidden;
border-bottom: 1px solid #ddd;
}

.logo{
float: left;
width: 300px;
}

.top-menu{
float: right;
margin-top: 30px;
}

.top-menu ul{
list-style-type: none;
}

.top-menu ul li{
display: inline-block;
}

.top-menu ul li a{
display: block;
padding: 10px;
font-size: 16px;
color: #002633;
}
.top-menu ul li a:hover{
color: #B16B67;
}

searchbar {

display:none;
float:left;
width:100%;
height:62px;
padding-left:25px;
padding-right:10px;
z-index:9999;
background:#f4f4f4;
}

s {

display:block;
width:88%;
borders:0;
outline:none;
height:60px;
line-height:60px;
font-size:2em;
font-weight:700;
color:#676767;
padding:0;
background: #f4f4f4;
}

searchsubmit {

display:block;
float:right;
margin-top:6px;
background:none;
color:#717171;
borders:0;
outline:none;
cursor: pointer;
}
Setting the Header and Search Form
It can be seen there that we use the display:none property on the #searchbar ID so that the search form is lost or not displayed when the website is first run. The form will appear only when the search icon is clicked, and to bring it up we need Jquery to process the trigger event on click, so when the icon is clicked jquery will change display:none to display:block so that the form is visible. And when the icon is clicked a second time then the form will disappear, because with jquery we change display:block back to display:none to hide ID #searchbar

Animation With Jquery
To change the css class easily, we need jquery. If the visitor clicks on the search icon (magnifying glass) in the menu, jquery will change the original class from Font Awesome to .fa-search-minus. From a User Experience (UX) point of view this is fantastic as it helps to differentiate between hidden and visible search fields

$(function(){
var $searchlink = $(‘#searchtoggl i’);
var $searchbar = $(‘#searchbar’);

$(‘.top-menu ul li a’).on(‘click’, function(e){
e.preventDefault();

Creating Tabs With CSS

Creating tabs is usually more popular using jquery, but actually it’s enough with css that we can create tabs that are no less good.

tabs-css

In this article, we will briefly explain how to create tabs using only css, without the help of jquery or other javascript.

HTML Structure
First, let’s create the HTML structure

Web Design.com Tutorials

CSS Tabs


Home

About

Contact

Social Media

Welcome TWDers

Content….

About TWD

Content….

Contact TWD

Content….

Social Media

Content…
It can be seen in the script above, to create the title of the tab we use input tags and labels, in this example we create 4 tabs, where each tab is given the ID tab1, tab2, tab3, tab4

Meanwhile, the content of each tab is created with section tags, each of which has an ID content1, content2, content3, content4.

Styling with CSS
After we create the html structure of the tab, of course it will not be in the form of a tab, it needs to be designed or styled using css, this is the css code

body {
backgrounds: #5B264E;
font-family: “Open Sans”, “Arial”;
}
a{
text-decoration: none;
colors: #000;
}
a:hover{
color: #B7977B;
}
play {
background: #FFF;
width: 500px;
margins: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}

/* Important codes */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursors: pointers;
text-decoration: underline;
}

tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {

display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}
CSS Code for Tab
The most important thing to note in the code above is the code that we marked with /* Important Code */ until the end.

Where is the code that changes the input tag to a tab, why use radio type input? because tabs usually only have one active section while the others will be closed, for that only radio type inputs are allowed to be selected like that.

So the logic is as simple as this: the section tag when loading will be hidden, when one of the tab IDs is active (one of the radio inputs is selected), the contents of that ID will be displayed, using the display:block command.

Demos and codes

You can see the demo and also download the source code at the link below

Thus our tutorial this time, greetings web design & development Indonesia.

If you are interested in being a guest writer on this website, please register immediately and write your interesting articles that are fresh and have never been posted anywhere before.

Free and Responsive Administrator Template

Responsive HTML templates for free administrator pages are indeed a bit difficult to find on the internet, there are only a few of them compared to other types of templates such as templates for news websites or for portfolios.

Free Administrator Templates

Tutorial-webdesign.com this time will inform you of a free administrator template that is good enough for you to use in your project, of course the quality and features are quite qualified for a free template, which we can use without spending money.

AdminLTE once the template maker named the HTML template for this administrator page, this template was made with Twitter Bootstrap version 3, and of course it is responsive, so it still looks attractive when opened from your cellphone or tablet PC. This template was created by Abdullah, who is a student at the University of Tennessee Knoxville (UTK).

Some of the features in this template include:

Dashboard
Mailbox
Calendar
Invoice
Lockscreen
Login
Register
404 Error
500 Errors
Blank page
This template supports almost all modern browsers

IE 9+
Firefox 5+
Chrome 14+
Safari 5+
Opera 11+
Okay, what are you waiting for, we think you can’t wait to download and try it.


Hopefully this template can be useful for you, if you want to make a donation to the creator as a sign you can too, so that the maker is more enthusiastic about making free templates again.

See you in the next articles about the world of websites, greetings web design & development Indonesia

Istilah-Istilah Dalam Internet (bag.1)


Bagi mereka yang tertarik dengan dunia web ada baiknya mengetahui terlebih dulu istilah-istilah yang dipakai di dunia internet sebagai pengenalan. Artikel ini saya bagi menjadi dua bagian, bagian 1 dan bagian 2 dan untuk bagian 2 akan menyusul. Di dunia internet ini profesi yang tersedia tidak hanya web desainer dan web programmer saja. Ada banyak peluang pekerjaan lain yang berkaitan dengan website, diantaranya SEO specialist, content creator, information architect, online marketer, blogger. Adapun istilah-istilah tersebut adalah sebagai berikut :

Internet
tree-200795_640
Ilustrasi: Internet

Jaringan (network ) dari seluruh komputer di dunia yang saling terhubung satu sama lain. Kumpulan dari jaringan komputer pribadi, publik, pemerintah, bisnis, di seluruh dunia yang membentuk jaringan besar yang saling terhubung melalui kabel maupun koneksi wireless. Secara sederhana bisa kita bayangkan internet adalah sebuah kota yang terdapat gedung, rumah, komplek perumahan, toko, kantor, stasiun, terminal yang saling terhubung melalui jalan besar maupun jalan kecil. Gedung, rumah, toko, kantor, stasiun dianalogikan sebagai jaringan komputer, jalan dianalogikan sebagai kabel, serat optik, koneksi wireless.

URL
Kependekan dari Uniform Resource Locator yaitu alamat dari sebuah halaman web atau sebuah website. Sebagai contoh : http://.www.detik.com. Untuk menuju alamat sebuah website atau suatu halaman web kita tinggal mengetik alamat tersebut di address baru sebuah browser.

HTTP
Apa yang kita lihat di layar komputer, notebook, tablet, smartphone saat mengakses sebuah halaman web adalah hasil dari permintaan browser kepada web server. Konten yang kita lihat seperti teks, image, video yang tersaji di layar komputer, notebook, tablet, smartphone dikirim dari web server ke browser. Komunikasi antara browser dan web server ini menggunakan HTTP (HyperText Transfer Protocol).

Browser
Sebagaimana kita menggunakan aplikasi Photoshop untuk edit image, MS Office atau Open Office utuk membuat/edit dokumen, membuat/edit spreadsheet, membuat presentasi dan lainnya. Browser adalah aplikasi software yang digunakan khusus untuk mengakses halaman web yang terdiri dari kode HTML. Ada beberapa browser yang paling banyak digunakan diantaranya Chrome, Mozilla, Internet Explorer, Opera, Safari.

IP addrress
Pada prinsipnya setiap komputer atau device yang terhubung ke internet memiliki alamat. Layaknya sistem alamat di dunia nyata, alamat ini sebagai identitas bagi setiap komputer atau device lainnya. Sebagaimana di dunia nyata untuk mengirim barang ke seseorang yang berada di suatu tempat tentu harus memiliki alamat, begitu pula dengan komputer yang terhubung dengan internet.

Anda yang berada di Jakarta berkirim email ke teman anda di negara lain maka baik anda maupun teman anda harus memiliki IP address supaya pesan anda sampai ke komputer teman anda. IP address adalah alamat bagi komputer atau device yang terhubung ke internet.

Domain
Domain name adalah nama yang bisa dipilih untuk menamakan suatu website yang berfungsi untuk mengidentifikasi sebuah website. Nama domain bisa dipilih dengan kombinasi dari huruf, angka, hyphens (-) lalu di ikuti dengan ekstensinya (.com, .net, .org dan seterusnya). Apabila ingin memiliki sebuah nama domain maka yang bersangkutan bisa membelinya.
Contoh :

datakekerasan.org
detik.com
intraktive.com
Web Page
Salah satu halaman dari sebuah website, ditulis menggunakan kode HTML yang berisi informasi atau link. Sebagai perumpamaan website adalah sebuah buku, web page adalah salah satu halaman dari website.

Web Page

HTML
Kependekan dari Hypertext Markup Language, bahasa yang digunakan untuk membuat halaman web. Tag dan attribute HTML membentuk suatu halaman web.

CSS
Kependekan dari Cascading Style Sheets, kode yang digunakan untuk mengatur layout halaman web. CSS digunakan bersama-sama HTML dalam membuat halaman web, dimana CSS berfungsi mengatur semua berkaitan dengan style suatu halaman web sementara HTML berfungsi membangun kerangka halaman web.

Web Hosting
Salah satu kelebihan dari halaman web adalah ketersediaannya untuk diakses 24 jam dari mana saja lokasi pengakses berada selama terkoneksi dengan internet. Perusahaan web hosting memberikan layanan untuk itu, menyediakan software, hardware dan SDM mereka sehingga website bisa diakses selama 24 jam. Pemilik website hanya mengupload file webnya ke server yang ada di perusahaan web hosting.

Server-side
Operasi/kegiatan yang dilakukan di server dalam konteks hubungan server-client. Sebagai contoh saat mengakses sebuah halaman web di komputer menggunakan browser, browser adalah client yang mengirim permintaan kepada server. Kemudian server merespon permintaan client. Sebelum merespon permintaan client lebih dulu terjadi kegiatan di server, seperti menerjemahkan permintaan client, memproses, memilih data dan sebagainya.

Client-side
Operasi/kegiatan yang dilakukan di client dan tidak melibatkan server. Operasi yang terjadi hanya di browser, tidak ada permintaan data, verifikasi data ke server. Sebagai contoh sederhana saat user mengarahkan kursor mousenya (roll over ) ke menu sebuah website dan teks menu berubah warna, ketika user mengisi password saat registrasi di sebuah website yang menampilkan pesan bahwa password tidak boleh kurang dari 8 karakter.

Tutorial on Creating Responsive Web Portfolio Using HTML5, CSS3 and Jquery

This tutorial will explain how to create a simple portfolio website using HTML5, CSS3, Jquery. In this case we are trying to create a web portfolio design for a cartoonist, illustrator, or artist. If previously we had created a one page website with a flat design style, now we will again create a one page website, it can even be called just a landing page.

Free Portfolio Templates Layout
Download

Web Portfolio doesn’t need to be too complicated, what is needed is information about who owns the portfolio, examples of work, and contacts who can be contacted, so it’s not too complicated actually creating a portfolio website.

Web Portfolio doesn’t need to be too fancy, it’s quite simple but the contents of the portfolio shouldn’t be simple ~ TWD

Simple tips to make your portfolio more crowded, one of which is to create a blog that is associated with the portfolio, so a blog as a visitor attraction. Hm .. we will not discuss in detail the problem of marketing here 🙂 , back to focus on the tutorial.

Before starting we should know in advance what we are going to make. The following is an example of a portfolio that we will create – DEMO

Ingredients

Just like cooking, making a website also needs ingredients, here are the ingredients we need, because here the author only makes examples, so the examples of his portfolio are taken from several websites, not personal ones.

jquery
CSS Reset from Meyer web
Google Fonts Montez & Sofadi One
Magnific Popup
Critters – Ohh Deer (Image for header)
Q2. What do you do in your spare time? (Image for the How I Work section)
Logan Evolution (Image For Gallary, just for demo)
File Structure

The following file structure has been prepared, the css files are placed in the css folder, the images are placed in the img, the images for the gallery are placed in the images folder, while the popup plugin is in the popup folder.

File Structure
File Structure

HTML Structure
Next we immediately create the HTML structure used. The HTML structure of the template created is already valid based on the W3 Validator.

Creating headers

Boss Tut Web

An Indonesian Illustrator

Creating Headers
Creating Website Content, here we learn to use the display css functions: table , table-row, and table-cell to create columns that are flat in height in the .box class, almost similar in function to the table tag that we usually see How I Work

Step 1: Sketch.

Pencils Graphite (H) on 17×14″ Strathmore Windpower Bristol

Step 2: Inking.

Inks Windsor Newton Series 7s (0-2), Copic Technical Pens, White Out. Scanned at 1200DPI (Bitmap)

Step 3: Coloring.

Finish Treatment: Photoshop Gradiant layers, hue/adjustment layers. Diffusion achieved using solid fill layer based on color channel, blurred and reduced to 20% Opacity.

The code above is for the How I Work part
Creating a Gallary Section, this gallery section is adjusted according to the rules of the Magnific Popup plugin


The code above is for the Testimonial Section
Creating Footer Section

After the display is okay, we add animation to the header so that the header can move slowly, here we use jQuery

(function(window, $) {

window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();

var y = 0,
f = 0.45;

function move() {
y -= f;
$(‘#banner’).css(‘background-position’, ‘center ‘ + y + ‘px’);
requestAnimationFrame(move);
}
move();

})(windows, jQuery);
The code above is to make the header move
As for the gallery so that popups can appear, we add a script like the following, the script is documented from the plugin.

$(document).ready(function() {
$(‘.gallery’).magnificPopup({
delegates: ‘a’,
type: ‘image’,
tLoading: ‘Loading image #%curr%…’,
mainClass: ‘mfp-img-mobile’,
galleries: {
enabled: true,
navigateByImgClick: true,
tPrev: ‘Previous (Left arrow key)’, // title for left button
tNext: ‘Next (Right arrow key)’, // title for right button
tCounter: ‘%curr% of %total%’, // markup of counter
preload: [0,1] // Will preload 0 – before current, and 1 after the current image
},
images: {
tError: ‘The image #%curr% could not be loaded.’,
titleSrc: function(item) {
return item.el.attr(‘title’) + ‘‘ + item.el.attr(‘desc’) +’‘;
}
}

});
});
The above code to make the popup work properly
Done..

Demo (on desktop & mobile) | Download Code
That’s it for this tutorial, hopefully it will be useful for all of you, if you have any questions, please write them in the comments section.

greetings web design indonesia

Add Color Animation Effects to Images With CSS3 Filters 

Creating effects with css is increasingly prevalent nowadays, by using CSS filters we can create effects that we usually find in Photoshop, even effects like Instagram we can create with CSS3 capabilities. This CSS filter is relatively new, and is still rarely used.

css3 filter effects

In this tutorial we will try to create an effect with CSS Filters combined with CSS Animation so that it will produce an interesting image color transition effect. Unfortunately, it only supports webkit browsers like Google Chrome or Safari.

Usage: This effect can be used to beautify the Header, Images on the gallery website, and more.

Related article:

Creating Black and White Images With CSS Filters
Creating Instagram Effects with CSS3 Filters
Let’s just start by creating an html file.

HTML
In this paper I only show one div, although in the demo there will be many divs because to enhance the appearance of the demo, but basically there is only one div that has an effect.

Indonesian Web Design Tutorial

What you need to pay attention to there is only giving column1 class, because that column will be effected with css.

CSS
To give effect to the div containing the image, we give the effect using the following css

.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: ‘Hammersmith One’, sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margins: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}

/* Animations */
@-webkit-keyframes pulse {
0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{

/* -webkit-filter: / / contrast(200%) / / brightness(25%) / / invert(100%) / / hue-rotate(110deg) / / grayscale(100%) / / sepia(100%) / / blur(10px); */

/* The above effects can be selected */

/* -webkit-transition: -webkit-filter 1s; / -webkit-animation: pulse 3s alternate infinite /mover 5s alternate infinite*/;

}
.column1:hover { -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%) /* blur(2px) */; }
you can see there we only use contrast and grayscale effects, for other effects you can use such as invert, sepia, blur, etc.

Demo

For those of you who can’t wait to see the results that have been made, click the demo link below or download the code from github.

So, hopefully useful for those of you who are studying CSS3.

Greetings Indonesian web design

Creating Animated Text Typing Effects With CSS

Text typing animation is usually created with the help of Jquery, but in this article we will try to make it only with CSS.

This animation can of course be used if you want to make some kind of presentation on the website, or just to beautify the website page.

Type
Typing Illustration, credit photo by Janelene Juanillo

This animation is also usually seen on hacked websites, usually the hacker leaves a trail with a message that looks as if it is being typed.

How to Make it?
To make it not too difficult, just a few lines of css code then we can get the effect of typing the text on our website.

HTML Code

Here’s the HTML code used:

Welcome to Tutorial Web Design Indonesia | http://www.tutorial-webdesign.com

It can be seen there that we create a class with the name .container-typed.

CSS Code

For the CSS code we use CSS Animation which is a feature of CSS3

.container-typing
{
font-size: 22px;
width: 740px;
whitespace:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}

@keyframes type{
from { width: 0; }
}

@-webkit-keyframes type{
from { width: 0; }
}
It can be seen in the css code above that we create an animation with the name type and set the animation on the keyframe.

Next add overflow:hidden so that when the animation changes the paragraph size to 0 we won’t be able to see the text. Finally we can add a typing animation with the steps() function

The animation will increase the paragraph size from 0 to 740px, in 50 frames thereby creating the effect that text is being typed.

DEMO | DOWNLOAD CODE

That’s all for this tutorial, hopefully it will add insight and improve all of our skills.

Greetings Web Design Indonesia.

Icon Shaped Writing for Website Design

Icon Shaped Writing for Website Design

Often in making a website, we need an icon to provide a clearer picture and easily captured by website users. The following is an icon-shaped font that can be used to complete the appearance of your website.

Icon Fonts

How to use it is very easy, no need to install or download anything. Use the CDN provided by this font maker:


or

If you want to use this font on localhost please download this font here. After that, copy it to the website directory and call this awesome css font on the section of your website.


And please choose to share the icon provided by this font to be installed on your website.

Icon list provided font awesome
Icon list provided font awesome

Still confused about what is meant, well… here I give some views that show the use of this font in several website components.

In the navigation menu in the website header:
Home Icon on website navigation menu
Html code used:

It can be seen in the code above to display the icon, we just need to determine the class according to the code of each icon .fa fa-book fa-fw

Button with icon in it:
Button with icon in it

Html code used:

Delete
Settings

Font Awesome
Version 4.0.3

Well, easy is not it to use?

Another advantage that I like is that this icon can be styled using css like other fonts. It’s cool, isn’t it, if you want to change the color, just give it a color, change the size just give it a font-size, you can also give it a shadow. It’s great!!!

Okay, so my short sharing.

Regards

Declaring Variables In CSS

The new CSS Variable feature, One of the most frequently asked, most wanted most awaited requests by web designers is “Can CSS declare variables?”. And finally that question has been answered by the W3C. After a lot of discussion, finally the CSS Custom Property to define variables in css can be implemented. This feature of course allows css code writers to specify variables to be used repeatedly in css documents.

To try it you can use Mozilla Firefox Nightly from version 29 or later.

References to variables can be made in property values ​​using the var() syntax.

css-variable
Image Credit : IaRuth

Custom properties that declare variables must all be named starting with var-. Custom property values ​​must be unique. All can take almost any token stream, as long as it’s balanced.

For example, an author would declare some common values ​​in the style rule that match the root element, so that they would be available for every element in the document.

:root {
var-theme-colour-1: #009EE0; // Blue
var-theme-colour-2: #FFED00; // Yellow
var-theme-colour-3: #E2007A; // Red
var-spacing: 24px;
// var-xxxx to create another variable, the variable condition must be prefixed with var-
}
For Cross Browser maybe you can use the following syntax.
:root {
/* Cross Browser */
-webkit-var-theme-colour-1: #009EE0;
-moz-var-theme-colour-1: #009EE0;
-ms-var-theme-colour-1: #009EE0;
-o-var-theme-colour-1: #009EE0;
var-theme-colour-1: #009EE0;
…
…
-webkit-var-theme-colour-2: #FFED00;
…
}

Variables can be referenced at any element position in the value of other properties, including other custom properties. The variables in the stylesheet above can be used, for example, as follows:

h1, h2 {
/* Cross Browser */
color: webkit-var(theme-colour-1);
color: moz-var(theme-colour-1);
color: ms-var(theme-colour-1);
color: o-var(theme-colour-1);
color: var(theme-colour-1);
}
h1, h2, p {
margin-top: var(spacing);
}
em {
background-color: var(theme-colour-2);
}
blockquote {
margins: var(spacing) calc(var(spacing) * 2);
padding: calc(var(spacing) / 2) 0;
border-top: 2px solid var(theme-colour-3);
border-bottom: 1px dotted var(theme-colour-3);
font-style: italic;
}
Next create the html syntax as follows.

The title of the document

A witty subtitle

Please consider the following quote:

Text of the quote goes here.

then the result is like this:

css-variable

Variables are resolved based on the value of the variable in the element property with the variable reference applied. If the H2 element has style=”var-theme-colour-1: black” above it, then H2{color: var(theme-colour-1);} will by default be resolved using the value in :root.

A variable reference can also include a fallback for use in cases where the variable is not defined or is invalid (due to being part of the variable reference cycle). The first rule in the stylesheet uses variables which are written as follows:

h1, h2 {
color: var(theme-colour-1, rgb(14, 14, 14));
}
which will result in a dark gray color if the theme-colour-1 variable is not defined on any of the heading elements.

So a brief introduction about using variables in CSS, for more info please read the official W3C document

Tutorial to Change Background Color When Scrolling

Changing the background when scrolling is interesting enough to be applied to web pages, this can attract the attention of website visitors as long as it is used correctly, soft, and uses appropriate colors.

With the help of jquery it is not difficult to implement, just a few lines we can get the effect. One website that has implemented tricks like this is a digital telepathy website.

background scroll animation

Related article

Create a New Website Background Animation Change Color
Let’s just make it first from the HTML structure

HTML

SCROLL

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

Section 2

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

Section 3

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

There we see that there are IDs #first, #two, #third, all of which are actually not important in making scrolls, they are only used for the purpose of clicking on the menu, but have no effect on the scroll effect, so it doesn’t need to be a concern.

CSS
body{
background-color: yellow;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
margins: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
color: #1A2B2A;
overflow-x:hidden;
}
css code snippet
jquery
This is the most important part to create the effect of changing colors when the web page is scrolled.

$(window).scroll(function(){
var y = $(window).scrollTop()
if (y <= 1600){
$(‘body’).css(‘background-color’,’yellow’);
} else if(y <= 3200){
$(‘body’).css(‘background-color’,’orange’);
} else {
$(‘body’).css(‘background-color’,’red’);
}
});
There we use the scroll function, and use the scrollTop() function from jquery to find the page position calculated from the top page of 0px. There we see that there are numbers 1600 and 3200, that means when our position is 1600 px from above the background will change, as well as when it reaches 3200px then the background changes again, if you still want it, just specify at what number it will change color.

DEMO | Download Script
Hopefully this tutorial can be useful for you, making the website you are building more interesting. Keep in mind this is just the basics, you can use tricks for more serious websites. One website that has implemented tricks like this is a digital telepathy website.

Greetings Indonesian web design