სადესანტო გვერდის html შაბლონები სკოლისთვის. სადესანტო გვერდის შაბლონები

მოგესალმებით, ჩემო ძვირფასო მკითხველებო. დღეს ჩვენ ვისაუბრებთ ტექნიკურ ასპექტებზე, რომლითაც შეგვიძლია გავზარდოთ ჩვენი საქონლის ან მომსახურების გაყიდვების კონვერტაცია. ერთ-ერთი მნიშვნელოვანი პუნქტია კარგად შემუშავებული სადესანტო გვერდი პროდუქტებით. ეგრეთ წოდებული სადესანტო გვერდი, რომლის შექმნაზეც მოგვიანებით ვისაუბრებთ და მივიღებთ მზა გვერდების კოდებს.

რა არის სადესანტო გვერდი? ეს არის გვერდი, რომელსაც ადამიანები ჩვეულებრივ ხვდებიან რეკლამაზე დაწკაპუნების შემდეგ. შექმნილია ერთი შეთავაზებისთვის: პროდუქტი, სერვისი ან გამოწერა. ეფექტური სადესანტო გვერდი წარმატებული ონლაინ მარკეტინგის ქვაკუთხედია. პროდუქტი შეიძლება იყოს საუკეთესო ბაზარზე, რეკლამები დახვეწილია, მაგრამ კარგი სადესანტო გვერდის გარეშე, ძალისხმევა არ იძლევა 100% შედეგს. ის ეუბნება ვიზიტორებს, რა არის შეთავაზებული და რატომ უნდა სურდეს მათ ეს. გადაუდებელობის გრძნობა ხელს უწყობს გადაწყვეტილების სწრაფ მიღებას და მომხმარებლის გადასვლას კლიენტის კატეგორიაში.

როგორ შევქმნათ სადესანტო გვერდი? არასწორია იმის დაჯერება, რომ პასუხი მდგომარეობს აკრეფის უნარში. კარგი სადესანტო გვერდი არის კოორდინირებული მუშაობის შედეგი მიზნებზე, ტექსტზე, დიზაინსა და კოდზე. სადესანტო გვერდები, რომელთა მაგალითები ქვემოთ იქნება, დაეხმარება დამწყებთათვის ისწავლონ განლაგებასთან მუშაობის საფუძვლები, მაგრამ არ ჩაანაცვლებენ კონვერტაციის ტექსტებს და სამიზნე აუდიტორიის გაგებას. თქვენ ასევე შეგიძლიათ შექმნათ ისინი სხვადასხვა Landing Page დიზაინერების გამოყენებით.

ასე რომ, სანამ შექმნით სადესანტო გვერდს, ჰკითხეთ საკუთარ თავს:

• რას გააკეთებს ადამიანი სადესანტო გვერდზე მოხვედრის შემდეგ? იყიდის რამეს? შეავსებ ფორმას? გამოიწერეთ ბიულეტენი? სანამ თვალყურს ადევნებთ თქვენს კონვერტაციის მაჩვენებელს, დაისახეთ მკაფიო მიზნები.
• ვინ არიან ჩემი კონკურენტები? სინამდვილეში, ეს არის სამი კითხვა: ვინ, რამდენად წარმატებულია ისინი და როგორ შეიძლება მათი მიღწევების გამოყენება? იმიტაცია მაამებლობის ყველაზე გულწრფელი ფორმაა. თუ თქვენი კონკურენტები აკეთებენ რაღაცას, რაც მუშაობს, გაიმეორეთ იგი თქვენს საიტზე.
• ვინ არის ჩემი აუდიტორია? რაც უფრო კარგად გესმით თქვენი ნიშა და სამიზნე აუდიტორია, მით მეტია შანსი იმისა, რომ თქვენი ძალისხმევა ანაზღაურდება.

თქვენ უნდა შესთავაზოთ ყველა საჭირო ინფორმაცია, მაგრამ არა იმდენად, რომ გადატვირთოთ და განდევნოთ თქვენი პოტენციური კლიენტი.

სადესანტო გვერდის შექმნის მაგალითები + დუმებისთვის კოდირება

სანამ დავიწყებთ, მოდით გადავხედოთ HTML და CSS-ს. იმის გაგება, თუ როგორ მუშაობენ ისინი, დაგეხმარებათ შექმნათ სადესანტო.

HTML არის ბრაუზერის მარკირების ენა ვებსაიტის ვიზუალიზაციისთვის. დაწერილია კუთხის ფრჩხილებში ჩასმული ტეგების გამოყენებით, რომლებიც განსაზღვრავენ შინაარსს.

ტეგი იხსნება () და იხურება () შევსების გარშემო:

შინაარსი

დაზუსტებისთვის, ატრიბუტები ემატება სახელის შემდეგ:

შინაარსი

CSS - განსაზღვრავს როგორ მოვაწყოთ HTML ელემენტები. შედგება სელექტორებისგან, თვისებებისა და მნიშვნელობებისაგან:

#სელექტორი (თვისება: ღირებულება;)

სელექტორი ემთხვევა კონკრეტული ტეგის სახელს html-ში. მნიშვნელობების შეცვლა და თვისებების დამატება არეგულირებს მის გარეგნობას. თქვენ შეგიძლიათ შექმნათ გვერდები, რომლებიც ერთმანეთისგან განსხვავებულად გამოიყურებიან, იმავე HTML-ში სხვადასხვა CSS სტილის გამოყენებით.

5 საწყისი ნაბიჯი

სწრაფი განლაგებისთვის, ჩვენ გამოვიყენებთ მინიმალური დიზაინის მქონე შაბლონს, რომელიც დაფუძნებულია bootstrap-ზე. ეს არის სისტემა თავისი სელექტორებით, რომელიც გამოიყენება მთელ მსოფლიოში განლაგების დასაჩქარებლად.

მოკრძალებულად გამოიყურება.

ამ თევზიდან რამდენიმე ეტაპად იქმნება ვებ-გვერდი ყველა გემოვნებისთვის.

დირექტორია სტრუქტურა საქაღალდეში:

• index.html: ეს არის მთავარი ფაილი, რომელსაც ჩვენ ვასწორებთ.
• /აქტივები: დამხმარე ფაილები განთავსებულია აქ:
• /css: დირექტორია შეიცავს ჩატვირთვისა და ხატის სტილებს. ფაილი, რომელსაც ჩვენ შევასწორებთ არის main.css.
• /img: საქაღალდე საიტის სურათებისთვის.
• /ფონტები: ხატის შრიფტები.
• /js: bootstrap javascript ფაილები.

ნაბიჯი 1: სათაურის გამოყენება

სათაური და ქვესათაურები არის ძირითადი ადგილები, რომლებიც ხელს უწყობენ შეთავაზების ღირებულების მკაფიოდ გადმოცემას.

მოდით შევცვალოთ საიტის სათაური და სახელი. აქ თქვენ არ გჭირდებათ რაიმე სახის აკრეფის უნარი - თქვენ წერთ საკუთარ ტექსტს ეკრანზე ყვითლად გამოკვეთილ ადგილებში.

ნაბიჯი 2. ბრევიტი არის მოქცევის და. შეღავათებისა და განაკვეთების დამატება

დაგჭირდებათ 4 განყოფილება:

• უპირატესობები;
• ტარიფები;
• მიმოხილვები;
• მოქმედებისკენ მოწოდება.

მოდით შევქმნათ ძირითადი შინაარსის განყოფილება "მთავარი", რომელშიც ჩავსვამთ საჭირო სექციებს:

…..
…..
…..
…..

წერტილების ნაცვლად შევსება.

უპირატესობების განყოფილებისთვის დაგჭირდებათ ეს კოდი:

უპირატესობები
სწრაფი

სანდო

Sed diam nonummy

მომგებიანი

Elit, sed diam nonummy

ტექნიკურად

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

სანდო

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

მომგებიანი

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

ტექნიკურად

Lorem ipsum dolor sit amet, consectetuer adipiscing

სანდო

Lorem ipsum dolor sit amet, consectetuer adipiscing

მომგებიანი

Lorem ipsum dolor sit amet, consectetuer adipiscing

შინაარსი სიცხადისთვის:

ჯერ კიდევ დაუდევარი ჩანს, მაგრამ პანიკის საფუძველი არ არის, გავაგრძელოთ.

ჩვენ ვწერთ ფასებს. შინაარსი იცვლება ისევე, როგორც პირველ ეტაპზე. ზოგადი აღწერა "ტარიფების" კლასით და სამი ტარიფით.

სატარიფო გეგმები

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ტარიფი No1
$10

თვეში / ადამიანზე

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

შეკვეთა
ტარიფი No2
$20

თვეში / ადამიანზე

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

შეკვეთა
ტარიფი No3
$30

თვეში / ადამიანზე

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

შეკვეთა

ეს ასე გამოიყურება.

მიუხედავად იმისა, რომ ჩვენ არ გვაინტერესებს მომავალი სადესანტო გვერდის გარეგნობა, ქვემოთ განვიხილავთ სტილის შეცვლის მაგალითებს.

ნაბიჯი 3: ენდეთ სიგნალებს და მოქმედებისკენ მოწოდებას

მიზნობრივი სიგნალების გამოყენება ვიზიტორებს მიანიშნებს, რომ ბრენდი სანდოა. სიგნალებს შეიძლება მრავალი ფორმა ჰქონდეს, მაგრამ კლასიკური არის მომხმარებელთა გამოხმაურება.

მომხმარებელთა მიმოხილვები

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

მოდით დავაყენოთ მოწოდება მოქმედებისკენ.

ისარგებლეთ დღეს შეკვეთისას

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

შეუკვეთე ახლავე!

მიმოხილვები დაეხმარება პოტენციურ მომხმარებლებს გადაწყვიტონ პროდუქტის შეძენა. სიცხადისთვის, ჩვენ გვჭირდება ავატარები, ასე რომ, ჩვენ დაუყოვნებლივ მოვათავსებთ მათ ადგილზე - თითოეული ციტატის ქვეშ.

კლიენტის სახელი.

ნაბიჯი 4: ქსელის და მობილური მეგობრული ინტეგრაცია

ქსელის განსახორციელებლად, ჩვენ გვჭირდება Bootstrap კონტეინერები. მნიშვნელოვანია გვახსოვდეს სწორი სვეტის სეგმენტების საერთო რაოდენობა - 12. კლასი განსაზღვრავს შინაარსის ჩვენების სიგანეს. ამ წინასწარ დამზადებულ ქსელში კარგია ის, რომ კონტეინერები შექმნილია რეაგირების გათვალისწინებით და დაუყოვნებლივ გამოსაყენებელია მობილურ მოწყობილობებზე. დეტალური აღწერა ოფიციალურ ვებგვერდზე. ბადე ასე გამოიყურება.

"მთავარის" შიგთავსი შეფუთული იქნება კონტეინერში. ამისათვის ზევით წერია შემდეგი:

… .

თუ თქვენ გჭირდებათ ბლოკი, რომ მოერგოს ეკრანის მთელ სიგანეს, მაშინ კონტეინერი ჩასმულია შიგნით. აქ ეს იქნება ჯუმბოტრონი და მოქმედებისკენ მოწოდება.

ჩვენ შევახვევთ ყველა ელემენტს, რომელიც მოითხოვს ერთმანეთზე განთავსებას ხაზის გამყოფებით.

ახლა ჩვენ შეგვიძლია დავარეგულიროთ სვეტების სიგანე, ფოკუსირება ჩატვირთვის ბადეზე. შეფუთვის შემდეგ, შიგთავსმა შეწყვიტა ეკრანის კიდეებზე მიწებება და გაჩნდა სუფთა ჩაღრმავები.

ჩვენ ვაყენებთ ფასებს ზედიზედ სვეტის კლასის col-lg-4 გამოყენებით. მწკრივის ხაზების შიგნით, აღარ არის საჭირო შეფუთვისთვის ცალკეული div-ების დაწერა, ისინი შეიძლება გაერთიანდეს არსებულებთან, რომლებიც გამოყოფილია ინტერვალით.

ანალოგიით, ჩვენ დავაყენეთ სვეტები მიმოხილვებისა და უპირატესობების განყოფილებისთვის. თუ თქვენ გჭირდებათ ელემენტის გვერდზე გადატანა, გამოიყენეთ ოფსეტური სვეტის კლასი col-lg-offset-2. ბოლო რიცხვი განსაზღვრავს რამდენი ბაზის სვეტით მოხდება ცვლა.

ნაბიჯი 5. შრიფტები და ხატები

ჩვენ ვახორციელებთ Google Font-ის სათაურის შრიფტებს. არჩევისას გახსენით იმპორტის ჩანართი და დააკოპირეთ მისგან მონაცემები main.css ფაილში. ჩვენ ასევე ვამატებთ სათაურის სელექტორებს ფაილს, რომლისთვისაც გამოიყენება ახალი შრიფტი.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* სათაურებისთვის შრიფტის იმპორტი */
.navbar-ბრენდი,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont გამომავალი */
}

სიცხადისთვის, უპირატესობებს აღწერს კლასი თვითახსნადი სახელწოდებით text-center და FontAwesome ხატებით bootstrap ნაკრებიდან.

ამ ეტაპზე მომზადება მთლიანად დასრულებულია.

სადესანტო გვერდი: კოდების მაგალითები შეთავაზებით, პარალაქსით და მრიცხველით

ჩვენ ვიყენებთ სამ ყველაზე პოპულარულ ტიპს: წინადადებით, ფორმით და უკუმთვლელი მრიცხველით. განლაგების პროგრესირებასთან ერთად, შაბლონს დაემატება ეფექტები.

მაგალითი 1: წინადადებით

მოდით დავაყენოთ ძირითადი ნაწილისა და ბალიშის ფონი ისე, რომ პირველი ეკრანი დაიფაროს.

ჯამბოტრონი (
ფონი: #f5f5f5 url(../img/fon.jpg) ზედა ცენტრი არ განმეორდეს;
მაქსიმალური სიგანე: 100%;
padding-top: 250px;
padding-bottom: 200px;
ტექსტის გასწორება: ცენტრი;
}

მოდით შევცვალოთ ჯუმბოტრონის სათაურის ზომა h2-დან h1-მდე. შემდეგი, ჩვენ ვწერთ სტილებს იმ ელემენტებისთვის, რომლებიც უნდა შეიცვალოს.

დავიწყოთ ხატებით.

სარგებელი მე (
ფერი: #cac4c4;
}

ჰეშის ნიშნის შემდეგ მითითებულია ფერი. თქვენ შეგიძლიათ აირჩიოთ თქვენი საკუთარი ვარიანტი html ფერის ცხრილების ან გამოსახულების რედაქტორის გამოყენებით.

შეწევა განყოფილების სათაურებისთვის

სექცია h2 (
padding-top: 30px;
ზღვარი-ქვედა: 25 პიქსელი;
}

ჩვენ ვაწესრიგებთ ტარიფების იერსახეს. მოხერხებულობისთვის, ჩვენ ვქმნით საკუთარ კლასებს იმ ელემენტებისთვის, რომლებიც გვინდა კონკრეტულად გამოვყოთ.

ტარიფი No1
$10

თვეში / ადამიანზე

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

შეკვეთა

და ბევრი CSS. რომელ ადგილებზეა პასუხისმგებელი სექციები, მითითებულია კომენტარებში - /* ვარსკვლავით ხაზებს შორის */

/* =========ტარიფის სტილები======== */
/* ტარიფის ზოგადი ხედი */
.pricing_item(
ფონი: #f2f2f2;
პოზიცია: ნათესავი;
ჩვენება: -webkit-flex;
ჩვენება: flex;

flex-direction: სვეტი;

align-items: მონაკვეთი;
ტექსტის გასწორება: ცენტრი;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
ზღვარი: 1em;
ფერი: #262b38;
კურსორი: ნაგულისხმევი;
overflow: დამალული;

}
/* შეცვალეთ ფონი, როდესაც დააჭირეთ */
.pricing_item:hover (
ფერი: #444;
ფონი: #daebef;
}
/* ინდივიდუალური ფასის ფონი თითოეულ ტარიფში */
.pricing_item:first-child .price (
ფონი: #9ba9b5;
}
.pricing_item:nth-child(2).price (
ფონი: #1f6098;
}
/* ფართო ეკრანებზე შუა ტარიფის სვეტი არის ჩაჭრილი და მონიშნული */
@media ეკრანი და (წთ. სიგანე: 66.250 ემ) (
.pricing_item(
ზღვარი: 1.5em 0;
}
.გამორჩეული(
z-ინდექსი: 10;
ზღვარი: 0;
შრიფტის ზომა: 1.15em;
}
}
/* სათაური */
.pricing_item h3 (
შრიფტის ზომა: 2em;
ზღვარი: 0.5em 0 0;
ფერი: #1d211f;
}
/* ფასის ტეგის ფონი */
.ფასი (
შრიფტის ზომა: 2em;
font-weight:bold;
ფერი: #fff;
პოზიცია: ნათესავი;
z-ინდექსი: 100;
ხაზის სიმაღლე: 95 პიქსელი;
სიგანე: 100px;
სიმაღლე: 100px;
ზღვარი: 1.15em auto 1em;
საზღვარი-რადიუსი: 50%;
ფონი: #77a5cc;
-webkit-transition: ფერი 0.3s, ფონი 0.3s;
გარდამავალი: ფერი 0.3s, ფონი 0.3s;
}
/* ვალუტა */
.ვალუტა(
შრიფტის ზომა: 0.5em;
ვერტიკალური გასწორება: სუპერ;
}
/* წინადადების განმარტება */
.წინადადება (
font-weight:bold;
ზღვარი: 0 0 1em 0;
padding: 0 0 0.5em;
ფერი: #2a6496;
}
/* სია */
.pricing_item ul (
შრიფტის ზომა: 0.95em;
ზღვარი: 0;
padding: 1.5em 0.5em 2.5em;
ტექსტის გასწორება: მარცხნივ;
}
/* ნივთების სია */
.pricing_item li (
padding: 0.15em 0;
}
/* შეკვეთის შეკვეთის ღილაკი */
ღილაკი .pricing_item(
font-weight:bold;
margin-top: auto;
padding: 1em 2em;
ფერი: #fff;
საზღვარი-რადიუსი: 5px;
ფონი: #428bca;
-webkit-transition: background-color 0.3s;
გარდამავალი: ფონის ფერი 0.3s;
}
/* ფერის შეცვლა ღილაკზე დაჭერისას */
ღილაკი .pricing_item:hover,
ღილაკი .pricing_item:focus (
ფონის ფერი: #285e8e;
}
/* ტარიფის ფონი*/
.bg-2 (
ფონი: #dddddd;
}

შედეგი

მომხმარებელთა მიმოხილვები. მოდით მივცეთ მათ სისუფთავე და მიუთითოთ მათი ადგილმდებარეობა.

/* ========= ჩვენების სტილი======== */
ჩვენებები (
padding: 4em 0;
ტექსტის გასწორება: ცენტრი;
}
ჩვენებები .avatar img (
საზღვარი-რადიუსი: 50%;
float: მარცხენა;
ჩვენება: inline;
margin-right: 1em;
სიგანე: 65px;
სიმაღლე: 65px;
ზღვარი-ქვედა: 30 პიქსელი;
}
.ჩვენებები .avatar p (
ტექსტის გასწორება: მარცხნივ;
padding-top: 1em;
ფერი: #5d5d5d;
შრიფტის წონა: 900;
}

რჩება მხოლოდ ბოლო მოწოდების და ქვედა კოლონტიტულის გაფორმება.

/* მოქმედება */
.მოქმედება(
ფონი: #476177;
მინ-სიმაღლე: 180px;
სიგანე: 100%;
padding: 4em 0;
ტექსტის გასწორება: ცენტრი;
}
.მოქმედება h2 (
ფერი: #fff;
შრიფტის წონა: 300;

}
.მოქმედება p(
ფერი: #fff;
ტექსტი-ჩრდილი: 0 1px 2px rgba(0, 0, 0, .2);
შრიფტის ზომა: 1.2em;
}
.მოქმედება .კონტეინერი (
margin-top: 3em;
}
/* ქვედა კოლონტიტული */
ქვედა კოლონტიტული (
ფონი: #333333;
padding: 1em 0;
ტექსტის გასწორება: მარჯვნივ;
}
ქვედა კოლონტიტული p (
ფერი: #fff;
ხაზის სიმაღლე: 1;
ტექსტი-ტრანსფორმაცია: დიდი;
შრიფტის ზომა: 0.7em;
margin-top: 0.5em;
}

ქვედა კოლონტიტულის ღილაკს ენიჭება ჩაშენებული ჩატვირთვის კლასი btn-default.

შაბლონის გაცოცხლება. ჩვენ შემოგთავაზებთ გლუვ გადახვევას და ღილაკებს სექციებისთვის, ასევე ტექსტის ანიმაციას პირველ ეკრანზე.

სამუშაოზე გადასვლისთვის ჩვენ შევცვლით სექციის ზოგიერთ კლასს ID-ით - შეღავათებისა და ტარიფებისთვის. და ჩვენ დავამატებთ ID-ის ბმულებს ღილაკებზე. სკრინშოტი - რა არის მიმაგრებული რაზე, მონიშნულია ყვითელი მარკერით.

ჩვენ დავაყენეთ ღილაკების შეწევა - jbutton. დაჭერისას გადახვევა მუშაობს, მაგრამ ძალიან მკვეთრად.

გლუვი გადასვლები იქმნება Javascript-ის ან jquery-ის გამოყენებით. ეს უკანასკნელი ნაგულისხმევად დაკავშირებულია Bootstrap შაბლონებთან.

გადახვევა ახლა გლუვია.

ტექსტში ანიმაციის დამატება Animate.css-ის გამოყენებით (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). ეს არის მზა ღია კოდი, მისი გამოყენება შესაძლებელია ნებისმიერ ვებსაიტზე. მოათავსეთ ფაილი Github-დან css საქაღალდეში და მიუთითეთ გზა.

ჩვენ ვირჩევთ ეფექტებს აქ: https://daneden.github.io/animate.css/. ჩვენ არჩეული გვაქვს fadeInDown. კოდში ასე წერია:

ახლა, როდესაც გვერდი იტვირთება ან განახლდება, ტექსტი ანიმაციური იქნება. მზადაა.

მაგალითი 2: ფორმისა და პარალაქსის ეფექტით

რაც უფრო მეტი ფორმის ველი იქნება წარმოდგენილი ვიზიტორზე, მით ნაკლებია მისი შევსების ალბათობა. მოითხოვეთ მხოლოდ მინიმალური საჭირო ინფორმაცია.

იგი აწყობილია ანალოგიით. ჩვენ შევცვლით ფონს და ფერს. და, რა თქმა უნდა, ჩვენ დავამატებთ ფორმას.

დავიწყოთ პარალაქსით.

მოდით შევცვალოთ ჯუმბოტრონის ფონი გამჭვირვალეზე:

ფონი: გამჭვირვალე;

სათავეში ჩავსვამთ სკრიპტს:

$(ფანჯარა).გადახვევა(ფუნქცია(ე)(
პარალაქსი();
});
პარალაქსის ფუნქცია ())(
var scrolled = $(ფანჯარა).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

სხეულში პირველი ხაზი არის კონტეინერი პარალაქსისთვის:

და CSS-ში მისი ქცევა არის:

bgparallax (
ფონი: url(/../img/fon.jpg) გამეორება;
პოზიცია: ფიქსირებული;
სიგანე: 100%;
სიმაღლე: 300%;
ზედა: 0;
მარცხენა: 0;
z-ინდექსი: -1;
}

პარალაქსი მზად არის. მაგრამ კოდში ცვლილებების შეტანა და ახალი ფონი მოითხოვს ფერის სქემის გადანაწილებას.

მენიუს ბნელის გაკეთება:

ნავიგატორი - ნაგულისხმევი (
ფონის ფერი: #333;
საზღვარი-ფერი: #444;
ფერი: მუქი ნაცრისფერი;
საზღვარი-რადიუსი: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
ფერი: მუქი ნაცრისფერი;
ფონის ფერი: rgba(0, 0, 0, 0.5);
}

ჩვენ ვცვლით წინადადებას jumbotron-ში ახლით - ფორმის კოდით:

Landing Page აქცევს ვიზიტორებს მომხმარებლებად
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

და ჩვენ ვიწერთ გარეგნობას

/* ფორმა */
.headform-list (
list-style-type: none;
ხაზის სიმაღლე: 26px;
შრიფტის წონა: 400;
padding: 0px;
ზღვარი-ქვედა: 40 პიქსელი;
}
.თავის ფორმა(
overflow: დამალული;
პოზიცია: ნათესავი;
ფონის ფერი: rgba(0,0,0,.4);
padding: 35px 40px;
საზღვარი-რადიუსი: 8px;
}
შეყვანა, ღილაკი, არჩევა, ტექსტური არე (
სიგანე: 100%;
ზღვარი-ქვედა: 10 პიქსელი;
}
.headform-list li .fa (
პოზიცია: აბსოლუტური;
ზედა: 0px;
მარცხენა: 0px;
სიგანე: 42px;
შრიფტის ზომა: 24px;
ტექსტის გასწორება: ცენტრი;
}
.headform-list li(
პოზიცია: ნათესავი;
მინ-სიმაღლე: 38px;
padding-left: 62px;
ზღვარი-ქვედა: 20 პიქსელი;
}
ჯუმბოტრონი პ (
ფერი: #fff;
შრიფტის ზომა: 16px;
შრიფტის სტილი: დახრილი;
}

ჯუმბოტრონის ტექსტიც აქ დასრულდა, რადგან ცვლილებებს ითხოვდა.

ჩვენ ვცვლით ტარიფებს.

/* ტარიფის ზოგადი ხედი */
.pricing_item(
ფონის ფერი: rgba(0,0,0,.4); /* ხაზი შეიცვალა */
საზღვარი-რადიუსი: 4px; /* ხაზი შეიცვალა */
პოზიცია: ნათესავი;
ჩვენება: -webkit-flex;
ჩვენება: flex;
-webkit-flex-direction: სვეტი;
flex-direction: სვეტი;
-webkit-align-items: მონაკვეთი;
align-items: მონაკვეთი;
ტექსტის გასწორება: ცენტრი;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
ზღვარი: 1em;
ფერი: #f2f2f2; /* ხაზი შეიცვალა */
კურსორი: ნაგულისხმევი;
overflow: დამალული;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* შეცვალეთ ფონი, როდესაც დააჭირეთ */
.pricing_item:hover (
ფერი: #444;
ფონი: #ddd; /* ხაზი შეიცვალა */
}

ახლა ისინი ასე გამოიყურება - გამჭვირვალე ფონი და მომრგვალებული კუთხეები.

შაბლონი მზად არის.

მაგალითი 3: უკუმთვლელი მრიცხველით

ჩვენ კვლავ ვცვლით ჯუმბოტრონის შევსებას და თარგს ვაფერადებთ ახალ ფონს, წინა შაბლონის მსგავსად. დააკავშირეთ მრიცხველის სკრიპტი:

HTML





დრო არ ელოდება
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum fazril delenit.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = ახალი Countdown((
დრო: 86400 * 3, // 86400 წამი = 1 დღე
სიგანე: 300
სიმაღლე: 60
, rangeHi: "day"
, სტილი: "Flip" //