HTML-ში დინამიური ბანერის შექმნის მაგალითი. თუ არ იცით HTML, ჩადეთ ბანერის კოდი. დაამატეთ ბანერი ADFOX-ში

HTML5 ბანერები

ჩათვლით 2299 რუბლი.

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

ასეთი ქცევის ძირითადი მიზეზები შემდეგია:

• Flash-ტექნოლოგიის მიმართ პრეტენზიები დაგროვდა კომპიუტერული უსაფრთხოების სფეროში და გაიზარდა მობილური მოწყობილობების პროცესორის დაღლილობა;
• ზოგიერთმა ბრაუზერმა დაიწყო Flash-ის ჩვენების დაბლოკვა დაბლოკვის მიზნით;
• ზე მობილური შენობები iOS (iPhone, iPad) Flash ასოების ჩვენება არ არის გადაცემული virobnik-ის მიერ;
• ბლოკერული პროგრამების პოპულარობა ბანერების ფლეშ-რეკლამაში;
• Vіdmova vіd podshої pіdtrimki და razvitie Flash-tehnologii її її vlasnik, კომპანია Adobe.

ანიმაციური HTML5 ბანერები შეიძლება გამოჩნდეს საზღვრების გარეშე ნებისმიერ ბრაუზერში, ეკრანზე, მე დავამაგრებ ნებისმიერს, მათ შორის სმარტფონებს, ტაბლეტებს და მედია ტელევიზორს. ვისზეც პოლიგაє їх ჯვარედინი პლატფორმა და მრავალფეროვნება.

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

რა შეიძლება იყოს HTML5 ბანერი?

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

ანიმაციის თვალსაზრისით, ასეთ ბანერს შეუძლია აჩვენოს ვექტორული ანიმაცია (სკალირების გარეშე), პერსონაჟების ანიმაცია, ფოტოები, ლოგოები, გრაფიკა და დიაგრამები, ტექსტი და 3D ანიმაციის ჩვენება. ინტერაქტიულობის თვალსაზრისით, HTML5-ბანერს შეუძლია რეაგირება მოახდინოს დივერსიფიკაციაზე და გავრცელდეს თქვენთვის დამატებითი შინაარსი და მიზანშეწონილობა. მედიის ტარების თვალსაზრისით, HTML5-ბანერს შეუძლია ვიდეო, სლაიდების და აუდიო ჩანაწერების დაკვრა. ადაპტაციის თვალსაზრისით, HTML5 ბანერი შეიძლება გაიჭიმოს გვერდის მთელ სიგანეზე, გააფართოვოს დამატებითი პანელი ან გაფართოვდეს სრულ ეკრანზე.

მოდით შევხედოთ HTML5 ბანერების ძირითად ტიპებს.

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

გაჭიმვა HTML5-ბანერი (ადაპტირებადი, გუმოვი).
ეს არის ბანერი, რომელიც შეიძლება დაიჭიმოს, იკავებს ეკრანის მთელ სიგანეს (და სიმაღლეს). (მოხსენება შეგიძლიათ იხილოთ ამ სტატიაში)

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

ხშირად ასეთი ბანერი შეიძლება იყოს ადაპტირებული სხვადასხვა ორიენტაციის კორექტირებით და დაუშვას მობილური დანართი.

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

HTML5 ვიდეო ბანერი.

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

თამაშის ინტერაქტიული ბანერები.
Baneri, yakі მოვუწოდებთ koristuvacha ჩართეთ ჯგუფში, vykonuyuchi მარტივი წვრილმანი.

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

ჭკვიანი HTML5 ბანერები (კალკულატორები).
Vykoristovuyutsya for zaluchennya, რომ vzaєmodії z koristuvachem, proponuyuchi yoma negainok razrahunok საჭირო პარამეტრებისთვის და შიდა ალგორითმით მოცემული ფორმულისთვის (მაგალითად, rozrakhunok სესხი, იპოთეკა, vitrati budmaterialіv და სხვა მოუხერხებელი ოპერაციები).

HTML5 ბანერის რედაქტირება– ცალკეულ შემთხვევებში, დეპუტატს დროულად სჭირდება ცვლილებები ბანერებში, საცალო ვაჭრობის დახმარების გარეშე (მაგალითად, ფასები, ვოდოსტები ან შეთავაზებები, რომლებიც ხშირად იცვლება). ჩვენ შეგვიძლია გავიაროთ ასეთი ამოცანები და შევიყვანოთ საჭირო პარამეტრები პირდაპირ ბანერის HTML კოდში, სადაც მენეჯერს შეუძლია დამოუკიდებლად შეიტანოს ცვლილებები. შესაძლებელია მოითხოვოთ უკეთესი გადაწყვეტილების მიღება, თუ როგორ ვნახო მონაცემები, გამარჯვებული ბანერით, ძველ ფაილებზე.

HTML5-ბანერები, რომლებიც გამოიყენება არსებული მონაცემებისა და API-ს გასაუმჯობესებლად.
ამ დროისთვის არის უამრავი სარეკლამო ბანერი ბანერის დასაბლოკად ძველი ძერელამ. თუმცა, რადგან საიტზე განთავსებულია ბანერი, რაც მას აძლევს ასეთ შესაძლებლობას, HTML5 ბანერს შეუძლია მოითხოვოს საიტს საჭირო ინფორმაცია (ტექსტი, რიცხვები, ციტატები) API-ის საშუალებით, რომელიც დამუშავებულია მოცემული ალგორითმის შემდეგ, აჩვენებს სწორი ინფორმაცია.

3D HTML5 ბანერები.
ასეთი ბანერები აქცევს კორისტუვაჩის პატივისცემას, გვერდში ქმნიან გამოსახულების ob'emnі მოდელს.

HTML5 3D ბანერი შეიძლება განხორციელდეს ობიექტის, რომელიც ახვევს, ბანერის ჩარჩოს კიდეებს, გახსნილი წიგნის ხედს ან სხვა 3D ეფექტებს.

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

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

HTML5-ბანერი - რა მჭირს ჩემს თავს და ტექნიკურად?

სწორად მიიღეთ HTML5 ბანერი მინი-საიტად. შეფერხების გარეშე.

HTML5, რა დაარქვა მას ბანერის ფორმატიє ვებგვერდების ჩემი განლაგება, უფრო მარტივი კაჟუჩი, განლაგება. І verstaєtsya იგივე კანონების მიხედვით, რა თანამედროვე საიტია. Vіn-ს შეუძლია შეცვალოს div-კონტეინერები, შრიფტები, რომლებიც დაკავშირებულია, css სტილებიდა js სკრიპტი. მთავარი ელემენტია ტილოს ანიმაციის კონტეინერი. თავად ანიმაცია რეალიზებულია დაეხმარე ჯავასსკრიპტი, რომელთა უმეტესობა სპეციალურად არის შემუშავებული ანიმაციური js-ბიბლიოთეკებისთვის.

რა არის შუაში? ახალია არქივში? რატომ ამდენი ფაილი?

Aje mi zvikli, scho banner - tse one image file JPG ან "gifka" ან "flash drive". მაგრამ გამოიცანით რა, როგორც ადრე დავწერეთ, HTML5 ბანერი, ფაქტობრივად, მინი საიტია. Vіn mіstіt ანონიმური ფაილები და ის მიეწოდება სარეკლამო მეიდანს zip-არქივში. შუა არქივი შეიცავს HTML ფაილს, java სკრიპტის ფაილებს, ბიბლიოთეკებს, სტილის ფურცლებს და სურათებს.

Შენიშვნა. ზოგიერთი ტიპის რეკლამისთვის შეგიძლიათ გამოიყენოთ მთელი ბანერი ერთ ფაილში, დაამატეთ ყველა სკრიპტი და სურათი Base-64 ფორმატში. ეს არ არის პრობლემა სერტიფიცირებული საცალო ვაჭრობისთვის. თუმცა, ბანერის მომზადების ვადის ასეთი ზრდა და ახალი ცვლილების შემოღება შეიძლება დაგვეხმაროს. საბედნიეროდ, ასეთი vimoga trapleyaetsya იშვიათად.

როგორ ვნახო HTML5 ბანერი რეკლამები ჩემს კომპიუტერზე?

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

როგორ გამოვიცნო, რომ შევქმენი მოქმედი HTML5 ბანერი?

როგორც ბანერი იქმნება რეკლამისთვის Google სერვისები, მაშინ თქვენს სერვისებში არის სასწაული ინსტრუმენტი დიზაინერის მუშაობის ხარისხის შესამოწმებლად - ონლაინ HTML5 ვალიდატორი Google-ისგან. მისი გამოყენება მარტივია: აიღეთ თქვენი zip-არქივი ბანერით და დაფიქრდით, გაიარეთ თუ არა საკონტროლო სია. შეწყალება აღინიშნება წითელი სამკერდე ნიშნებით. Yakshcho їх nemaє - თქვენი საცალო ვაჭრობა არ არის უფასო და ბანერი მზად არის დასაყენებლად Google AdWordsან ორჯერ დააწკაპუნეთ.

სარეკლამო ქსელებისთვის Yandex, Mail.ru, Rambler, adFox, adRiver და სხვა, ასევე ხდება ბანერის მოქმედების ხელახალი შემოწმება ტექნიკური მხარდაჭერისთვის, მას შემდეგ, რაც ის მიიზიდავს სისტემის ვებსაიტს. თუ პრობლემები გაქვთ, შეგიძლიათ მიიღოთ მოდერატორის კომენტარი შეწყალების აღწერით. Deyakі maidanchiki აძლევს მოადგილეს სარეკლამო საშუალება წინ გადახედვაბანერი ტესტის მხარეს.

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

და ბანერი ანიმაციით Java Script-ში - კიდევ რატომ?

ნუ მისცემთ თავს დაბნეულს. "Java Script ბანერი", "Canvas ბანერი" - გადახედეთ მათ, რომლებსაც ჩვეულებრივ უწოდებენ "HTML5 ბანერი". js-library ან განლაგების წესები შეიძლება შეიცვალოს უშუალოდ საცალო ვაჭრობის ინსტრუმენტში, მაგრამ ზოგადი შერჩევის სქემა ივსება იგივე.

როგორ შევქმნათ HTML5 ბანერი?

ყველაზე პოპულარული შუა პროგრამის დიზაინერი HTML5 ანიმაციების შესაქმნელად Adobe პროგრამაგააცოცხლეთ.

Google ხელს უწყობს განვითარების საკუთარ ინსტრუმენტს - Google Web Designer. პლიუსებს შორის არის უპიროვნო ჩაშენებული შაბლონების არსებობა და ბანერის გამოქვეყნების შესაძლებლობა შუამავლის გარეშე Google სარეკლამო სერვისებისთვის: adWords და Double Click. მინუსებს შორის არის ანიმაციის შესაძლებლობის შემცირება.

მოქმედი დიზაინერები, ძირითადად ამერიკელები, არიან Green Sock Animation Platform ბიბლიოთეკის რედაქტორი. პროტე, ჩვენ არ გვაქვს მნიშვნელოვანი სიგანის სუნი.

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

ტექნიკური მხარდაჭერა HTML5 ბანერებისთვის.

Wimogs Hustle:

• სათაური HTML5-ბანერი kb.;
• zip-არქივის სტრუქტურა, საქაღალდეების და ფაილების რაოდენობა;
• დაშვებული ფაილის ფორმატების სია;
• ბანერზე დაწკაპუნებით URL-ის გაგზავნის ჩართვის მეთოდი (ბანერის firmware);
• ნებადართული js-ბიბლიოთეკების გადატანა გარე ჰოსტინგებზე;
• ვიდეო და აუდიო ფაილების დაკავშირების შეკვეთა და გაცვლა;
• Imogi კადრის დიზაინამდე, პასუხისმგებლობის შეზღუდვამდე, ანიმაციის ციკლების სიხშირემდე და რაოდენობამდე, დავამატებ პროცესორს.

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

რა უნდა გავაკეთო ადრე შექმნილ Flash-ბანერებთან?

თავად ნახეთ - სარეკლამო მედიის უმეტესობა აღარ იღებს Flash-ბანერებს განთავსებამდე, Flash-კომპონენტები იბლოკება ბრაუზერებში და iOS მოწყობილობებზე, ამაგრებენ მათ Swiffy რობოტს (ერთადერთი ადექვატური ონლაინ Flash-ბანერის გადამყვანი HTML5-ისთვის).

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

და რაც შეეხება "გიფებს"?

აუცილებელია იმის გაგება, თუ რა არის GIF-ანიმაცია - ჩარჩოების სურათების ბოლო ნაკრები, როგორც ვიდეო ფაილებში. GIF ფაილი შეიძლება შეიცავდეს ინფორმაციას კადრების დამუშავების სიჩქარისა და გამეორებების რაოდენობის შესახებ. Tsim Yogo Mozhlivostі obmezhuyutsya.

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

რას ნიშნავს რეკლამის განმთავსებელი?

ზესამყარო ვაგის პრობლემა. ასე რომ, їy skhilnі navit banery. მაიდანის ყველა შესანიშნავი რეკლამა აჩვენებს მხოლოდ რამდენიმე ბანერულ რეკლამას კილობაიტებში.

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

როდესაც ანიმაცია იწყებს რამდენიმე ასეული კადრის შეცვლას, მაშინ gif-ბანერი გაიზრდება, თითქოს ინგლისური იყოს, "დრამატულად", რაც დრამატულია. მარჯვნივ არის 20 წამიანი გიფი ბევრი მეგაბაიტით. და ეს არ ჯდება სარეკლამო მერეჟაში, რადგან სამართლიანად არის ტურბოვანი ტიმ, sіlki trafіku ხდება zavantazhit koristuvachevі ბანერის გადახედვისთვის.

ასევე, თუ გჭირდებათ ბანერი უსახური ანიმაციური ეფექტებით, პერსონაჟების ანიმაციით, ინტერაქტიული, ადაპტური ან ვიდეო ბანერი - აირჩიეთ HTML5 ბანერი.

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

Გვჭირდება ახალი გზაშექმენით ბანერი რეკლამა.

Გვჭირდება ადაპტური ბანერები …

ახალი ფორმატი ბანერი რეკლამისთვის

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

• HTML ხმის გადაცემა უკვე ხელმისაწვდომია, და სემანტიკური rozmіka ძარცვა მათ summіsnym სხვადასხვა ნებართვით.
• ტექსტი, სურათები, ვიდეო, Javascript და ფორმათქვენ შეიძლება გამოჩნდეთ ბანერში ისე, როგორც არის, თითქოს ეს იყოს ვებ საიტი.
• ბანერებს შეუძლიათ გადაუგრიხონ დინამიური სერვერის სკრიპტებირომ ბაზი დანიკი, როგორც საჭიროა.
• HTML-ის გამოტოვებამ შეიძლება დაიკავოს მცირე ადგილი დისკზე.
• ბანერის შენარჩუნება იგივეა, რაც ვებ ჰოსტინგი.
• გამარჯობა ახალი ტექნოლოგიებივებ საცალო ვაჭრობისთვის- ვონი იგივეა, როგორც ვებ დეველოპერი.
• და შესანიშნავად, HTML5 ხმოვანი გადაცემის ადაპტირება შესაძლებელია ნებისმიერ ზომაზე CSS3 მედიის დახმარებით- ყველაფერი რაც ჩვენ გვჭირდება ადაპტაციური ბანერებისთვის!

ოტჟე, როგორ შეგვიძლია უცნაური რეკლამის შექმნა?

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

ჩვენ გვიკვირს, როგორ მუშაობს

საფონდო HTML5 რენდერის ღერძი, ნაჩვენები პოპულარული ზომით 125×125 პიქსელი:

და ღერძი არის იგივე გოლოშენნია, კრუნჩხული სიგანით:

პატივი ეცით, როგორც რეაქცია მორიგ სარეკლამო ცილისწამებაზე, თუ ბრაუზერის ფანჯრის ზომას შეცვლით... Dosit cool! 🙂

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

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

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

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

მე მხარს ვუჭერ 88 პიქსელის მინიმალურ სიგანეს და სტანდარტული სიმაღლეების შემტევი ნაკრების დედას:

• 31px "მიკრო"
  მიკრობარი (88 x 31)
• 60 პიქსელი "ღილაკი"
  ღილაკი 2 (120 x 60)
  მხარდაჭერის ბანერი (234 x 60)
  ზედა ბანერი (468 x 60)
• 90 პიქსელი "ბანერი"
  ღილაკი 1 (120 x 90)
  ლიდერბორდი (728 x 90)
• 125 პიქსელი "პატარა მართკუთხედი"
  კვადრატული ღილაკი (125 x 125)
• 250 პიქსელი "შუა მართკუთხედი"
  ვერტიკალური ბანერი (120 x 240* დასრულება ახლოს!)
  კვადრატული შედუღების ფანჯარა (250 x 250)
  შუა მართკუთხედი (300 x 250)
• 400px "დიდი კვადრატი"
  ვერტიკალური მართკუთხედი (240 x 400)
• 600px "hmarochos"
  hmarochos (120 x 600)
  ფართო hmarochos (240 x 600)
  საჯაროობა p_vstorinki-ზე (300 x 600)

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

არა მხოლოდ ეს, არამედ ჩემი დემო ბანერი რეკლამის საერთო ღირებულებაა 25 კბ-ზე ნაკლები (HTML, CSS და JPG სურათი). ფაილის მაქსიმალურ ზომაზე ნაკლები ერთი პატარა ბანერისთვის!

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

კადრების სიჩქარის შეცვლა CSS მედია მხარდაჭერისთვის

ზოგჯერ საჭიროა რეკლამებისთვის საპასუხო სიმაღლე, რისთვისაც საჭიროა შეცვალოთ iframe ზომა დამატებითი CSS მედიისთვის. მაინტერესებს რა უმოკლესი გზაგაფართოება - დააყენეთ iframe სიგანე და სიმაღლე 100%-ის ტოლი და მოათავსეთ ისინი div-ში კონკრეტული CSS ზომებით. ღერძი ასე გამოიყურება:

ღერძი i css:

/* ნაგულისხმევი სიმაღლე */ #რეკლამა ( სიმაღლე: 60 პიქსელი; ) @ მხოლოდ მედია ეკრანი და (სიმაღლე: 90 პიქსელი) ( /* 90 პიქსელი სიმაღლე */ # რეკლამა ( სიმაღლე: 90 პიქსელი; ) ) @ მხოლოდ მედია ეკრანი და (სიმაღლე: 125 პიქსელი) ) ( /* 125 პიქსელი სიმაღლე */ #რეკლამა ( სიმაღლე: 125 პიქსელი; ) )

აჩვენებს და აწკაპუნებს

საუკეთესო HTML5 ხმოვან ფორმებში - მათი ნახვა შეგიძლიათ დაეხმარეთ Google-სანალიტიკა, როგორც დიდ ვებსაიტებზე.

ზრობიმო სარეკლამო ბანერი CSS3-ში დახმარებისთვის. ამ საათში მე დავამატებ მხოლოდ CSS3 ანიმაციებს Firefox ბრაუზერებიდა WebKit. Ale dosit just zmusiti ბანერი pratsyuvati სხვა ბრაუზერებში. დაიცავით ახალი CSS ტექნიკის ექსპერიმენტების შემდეგ (განსაკუთრებით IE 7 და უფრო ძველი), რომ ნახოთ სასწაულებრივი ფუნქციონირება.

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

HTML მარკირება

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

კონტურის სტრუქტურის უკეთ გასაგებად, ჩვენ ყურადღებას ვამახვილებთ სხეულზე:

ზოგადად არის სამი ანიმაცია:

Vislizuvannya chovna ბოროტი. ჩერდება შეუკვეთავი სიისთვის (ჯგუფისთვის).

როზგოდუვანია ჩოვნას იმიტაცია წყალზე. Zastosovuєtsya სიაში (chovna).

საკვების ნიშნის გამოჩენა. აჩერებს div ელემენტს (დენის ნიშანი).

თუ დააკვირდებით დემო გვერდს, შეგიძლიათ თქვათ, რომ სიის ელემენტის ანიმაცია (ზოლი) ასევე არის შუაში არსებული div ელემენტი (Power ნიშანი). იგივე ანიმაცია არის "ჩამოკიდებული" შეუკვეთავი სიისთვის dіє თითო პუნქტში სიაში (წმინდა და საკვების ნიშანი).

Otzhe, შეგიძლიათ zrobiti visnovok, sho ბავშვის ელემენტებიწაიღეთ მამების ანიმაციები მათი მოქმედებების დასამატებლად. ახლა საკმარისზე მეტია მამის/სპადკოєმეტის სტრუქტურის დასამხობად.

css

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

Zvorotnya sumistnіst

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

მაგალითად: როგორ გავტეხოთ CSS? podіbniy ქვევით აჩერდა, მაშინ იქნება პრობლემები:

/* არასწორად! */ @keyframe our-fade-in-animation ( 0% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:1;) ) div ( გამჭვირვალობა: 0; /* დანიური fade-in-animation div - უი! */ ანიმაცია : ჩვენი -fade-in-ანიმაცია 1s 1;

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

და ღერძი ასე უსაფრთხოა ძველი ბრაუზერებით:

/* ფავორიტი */ @keyframe our-fade-in-animation ( 0% (გაუმჭვირვალობა:0;) 100% (გაუმჭვირვალობა:1;) ) div (გაუმჭვირვალობა: 1; /* დანიური div ანიმაციის გაქრობისთვის */ ანიმაცია : ჩვენი -fade-in-ანიმაცია 1s 1;

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

Ფონდი

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

აუცილებელია გახსოვდეთ 3 პუნქტი:

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

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

Თუ შესაძლებელია მოიგე ერთი ანიმაცია რამდენიმე ელემენტისთვის.ამ რანგში ჩვენ დავზოგავთ საათს და მალე გავაფართოვებთ კოდს.

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

#ad-1 ( სიგანე: 720px; სიმაღლე: 300px; float: მარცხნივ; ზღვარი: 40px ავტომატური 0; background-image: url(../images/ad-1/background.png); ფონის პოზიცია: ცენტრი; ფონი -გამეორება: არა-გამეორება; გადინება: დამალული; პოზიცია: შედარებითი; box-shadow: 0px 0px 6px #000;

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

#ad-1 #content (სიგანე: 325 პიქსელი; float: მარჯვნივ; ზღვარი: 40 პიქსელი; ტექსტის გასწორება: ცენტრში; z-ინდექსი: 4; პოზიცია: ფარდობითი; გადინება: ხილული; ) #ad-1 h2 ( font-family: "Alfa Slab One", კურსორი, ფერი: #137dd5; შრიფტის ზომა: 50 პიქსელი; ხაზის სიმაღლე: 50 პიქსელი; ტექსტი-ჩრდილი: 0px 0px 4px ანიმაცია: delayed-fade-animation /* გამოჩნდება h2 გაქრობის სიმულაციისთვის */ ) # ad-1 h3 ( font-family: "Boogaloo", cursive; ფერი: #202224; შრიფტის ზომა: 31px; ხაზის სიმაღლე: 31px; text-shadow: 0px 0px 4px #fff; ანიმაცია: delayed-fade-animation 10s 1 ease-in-out; /* გამოჩენა h3 რხევის იმიტაციით */ ) #ad-1 ფორმა ( ზღვარი: 30px 0 0 6px; 12s 1 ease-in-out; 16px, font-family: "Lucida Grande", sans -serif; ფერი: #ffff; r-ქვედა-მარცხნივ-რადიუსი: 5px; საზღვარი:1px მყარი #a2917d; მონახაზი: არცერთი; box-shadow: -1px -1px 1px #fff; ფონის ფერი: #c7b29b; ფონის ფერი - სურათი: ხაზოვანი-გრადიენტი(ქვედა, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus (ფონი-სურათი: ხაზოვანი გრადიენტი(ქვემოთ, rgb(199,178,155) , rgb(199,178,155) 100%); ) #ad-1 #submit ( სიმაღლე: 50px; float: მარცხნივ; კურსორი: მაჩვენებელი; padding: 0 20px; შრიფტის ზომა: 20px; font-family: "Boogaloo", cursive; ფერი: #137dd5; text-shadow: 1px საზღვარი-ქვედა-მარჯვნივ-რადიუსი: 5 პიქსელი: 1 პიქსელი მყარი # საზღვარი-მარცხნივ: არცერთი; ფონის ფერი: #fff; ფონის სურათი: ხაზოვანი-გრადიენტი(ქვემო, rgb(245,247,249) 0%, rgb( (255,255,255 ) 100%);

ახლა მოდით დავაყენოთ დრაივერის სტილი და შევქმნით სპეციალურ ანიმაციას:

#ad-1 ul#water( /* საჭიროა წყლისთვის სხვა ანიმაცია, შეგიძლიათ დაამატოთ აქ */ ) #ad-1 li#water-back ( სიგანე: 1200px; სიმაღლე: 84px; background-image: url(. . ) /images/ad-1/water-back.png), ფონზე-გამეორება: გამეორება-x; z-ინდექსი: 1; პოზიცია: აბსოლუტური; ქვედა: 10px; მარცხენა: -20px ანიმაცია: water-back-animation 3s infinite ease-in-out; /* აფრქვევის ბუდის იმიტაცია */ ) #ad-1 li#water-front ( სიგანე: 1200px; სიმაღლე: 158px; background-image: url(../images/ad-1/water-front .png), ფონი - გაიმეორეთ: გამეორება-x; z-ინდექსი: 3; პოზიცია: აბსოლუტური; ქვედა: -70 პიქსელი; მარცხნივ: -30 პიქსელი; ანიმაცია: წყლის წინ-ანიმაცია 2s უსასრულო სიმარტივე-შემოსვლა; პერსპექტიული ეფექტის შექმნა.

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

#ad-1 ul#boat ( სიგანე: 249px; სიმაღლე: 215px; z-ინდექსი: 2; პოზიცია: აბსოლუტური; ქვედა: 25px; მარცხნივ: 20px; overflow: ხილული; ანიმაცია: ნავი-ში-ანიმაცია 3s 1 გამარტივება /* სრიალებს ჯგუფს რეკლამის დაწყებისას */ ) #ad-1 ul#boat li ( სიგანე: 249px; სიმაღლე: 215px; background-image: url(../images/ad-1/boat.png); პოზიცია : აბსოლუტური, ქვედა: 0 პიქსელი, მარცხნივ: 0 პიქსელი; გადინება: ხილული; ანიმაცია: ნავი-ანიმაცია 2 წმ. სურათი: url(../images/ad-1/question-mark.png); პოზიცია: აბსოლუტური; მარჯვნივ: 34 პიქსელი; ზედა: -30 პიქსელი; ანიმაცია: დაგვიანებული-გაქრება-ანიმაცია 4s 1 ease-in-out; /* გაქრება კითხვის ნიშანში */ )

ახლა მოდით შევქმნათ სტილები სიცივისთვის. მათთვის, ჩემი vicoristovuvatimemo ანიმაცია ეფექტი unskinned მოძრაობა. ილუსტრაცია აჩვენებს იდეის არსს:

და i ღერძის CSS კოდი:

#ad-1 #clouds (პოზიცია: აბსოლუტური; ზევით: 0px; z-ინდექსი: 0; ანიმაცია: ღრუბლოვანი ანიმაცია 30წ უსასრულო ხაზოვანი; /* გადაახვიეთ პირქუში მარცხნივ, ჩამოაგდეთ და გაიმეორეთ */ ) #ad-1 #cloud-group -1 ( სიგანე:720px; პოზიცია: აბსოლუტური; მარცხნივ:0px; ) #ad-1 #cloud-group-2 ( სიგანე: 720px; პოზიცია: აბსოლუტური; მარცხნივ: 720px; ) #ad-1 .cloud-1 ( სიგანე : 172 პიქსელი; სიმაღლე: 121 პიქსელი; ფონის სურათი: url(../images/ad-1/cloud-1.png); პოზიცია: აბსოლუტური; ზედა: 10 პიქსელი; მარცხნივ: 40 პიქსელი; ) #ad-1 .cloud-2 ( სიგანე: 121 პიქსელი; სიმაღლე: 75 პიქსელი; ფონის სურათი: url(../images/ad-1/cloud-2.png); პოზიცია: აბსოლუტური; ზედა: -25 პიქს; მარცხნივ: 300 პიქსელი; ) #ad-1 . ღრუბელი-3 (სიგანე: 132 პიქსელი; სიმაღლე: 105 პიქსელი; ფონის სურათი: url (../images/ad-1/cloud-3.png); პოზიცია: აბსოლუტური; ზედა: -5 პიქს; მარცხნივ: 530 პიქსელი; )

ანიმაციები

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

ახლა ჩვენ შეგვიძლია ჩავსუნთქოთ სიცოცხლე ჩვენს სასწაულებრივ სტატიკურ სურათში:

/* ანიმაცია ზატრიმკას იმიტაციით გამართლებულია რამდენიმე ელემენტის საჩვენებლად. ტრიუკის იმიტაცია მიიღწევა პროცესის დაწყებით ანიმაციის პროგრესის 80%-ით (მაგრამ არა ერთბაშად). ასე შეგიძლიათ გაქრობის სიმულაცია: */ @keyframes delayed-fade-animation ( 0% (გაუმჭვირვალობა: 0;) 80% (გაუმჭვირვალობა: 0;) 100% (გაუმჭვირვალობა: 1;) ) /* ანიმაცია ფორმების ჩვენებისთვის ელ.ფოსტის მისამართი და ღილაკი. საკვანძო კადრების ფორმა-ანიმაცია ( 0% (გაუმჭვირვალობა: 0; მარჯვნივ: -400 პიქსელი;) 90% (გაუმჭვირვალობა: 0; მარჯვნივ: -400 პიქს;) 95% (გაუმჭვირვალობა: 0,5; მარჯვნივ: 20 პიქს;) 100% (გაუმჭვირვალობა: 1 ; მარჯვნივ: 0 პიქსელი;) ) /* ეს ანიმაცია დახატულია იმისთვის, რომ გემი ეკრანიდან გამოვიდეს ფილმის ბალიშზე: */ @keyframes boat-in-animation ( 0% (მარცხნივ: -200px;) 100% ( მარცხენა : 20px;) ) /* ანიმაცია ცივისთვის. ჰმარის პირველი ჯგუფი მოძრაობას იწყებს ცენტრიდან, ხოლო მეორე - მარჯვენა ხელით ეკრანის წინ. პირველი ჯგუფი სწორად არის ნაჩვენები ეკრანზე, ხოლო მეორე არის მემარჯვენე. როგორც კი მარცხენა ჯგუფი იკეტება, პირქუშები სწრაფად ირთვებიან კობზე: */ @keyframes ღრუბლოვანი ანიმაცია ( 0% (მარცხნივ: 0px;) 99.9999% (მარცხნივ: -720px;) * დარჩენილი სამი ანიმაცია პრაქტიკულად იგივეა - განსხვავება პოზიციონირების ელემენტებშია. სუნი ასახავს ოკეანის ფრქვევას: */ @keyframes ნავის ანიმაცია ( 0% (ქვემოთ: 0 პიქს; მარცხნივ: 0 პიქს;) 25% (ქვემოთ: -2 პიქს; მარცხნივ: -2 პიქსელი ); 25% (ქვემოდან: 8 პიქსელი; მარცხნივ: -22 პიქსელი;) ) 70% (ქვემოთ: 12 პიქსელი; მარცხნივ: -24 პიქსელი;) 100% (ქვემოთ: 9 პიქსელი; მარცხნივ: -20 პიქსელი;) ) @keyframes water-front-animation ( 0 % (ქვემოთ: -70 პიქსელი; მარცხნივ: -30 პიქსელი;) 25% (ქვემოთ: -68 პიქსელი; მარცხნივ: -32 პიქსელი;) 70% (ქვემოთ: -72 პიქსელი; მარცხნივ: -34 პიქსელი;) 100% (ქვემოთ: -69 პიქსელი; მარცხნივ : -30 პიქსელი;))

ვისნოვოკი

გაკვეთილის მსვლელობისას ვისწავლეთ რამდენიმე ძირითადი კონცეფცია:

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

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

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

ასეთ ბლოკებში ვათავსებ RMYA-ს, ჩემს საკუთარ თიზერებს/ბანერებს და ხანდახან რეკლამებს ვანაცვლებ vivoj-ით, არის მსგავსი ჩანაწერები, ან გავავლებ ხაზს ინფორმაციის მიწოდებისთვის.

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

მენეჯერი:ააგეთ დარჩენილი ბლოკი პლაჟის სვეტთან (გვერდითი ზოლი) - მცურავი. მანამდე ღვინო მხოლოდ იმ მომენტში იჭედება, თუ კორისტუვაჩი ახალს მიაღწევს გადახვევით და არა მაშინვე, როცა გვერდი გაიხსნება. ასევე, ბლოკს შეუძლია "vіdlipati", მიაღწიოს ძირამდე (მისი გადახვევის თავიდან ასაცილებლად).

ყველაზე სამუშაო გზა

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

ქვემოთ მოცემულია მცურავი ბლოკის კონდახი, რომელიც პრაქტიკულად ყველა საიტზეა განთავსებული, სადაც მე დავაყენე. აქციები არ იყო. ძრავა ასევე არ არის მნიშვნელოვანი (DLE, WordPress, LiveStreet და ა.შ.).

ჩადეთ შემდეგი HTML კოდი თეთრი სვეტის ბაგანის ქალაქში:

$(window).scroll(function() (
var sb_m = 20; /* შეიყვანეთ ზედა და ქვედა */
var mb = 300; /* რეზერვის სიმაღლე */
varst = $(ფანჯარა).scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();

If(sb_h + $(დოკუმენტი).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop": h));
}
სხვა (
sb.css(("paddingTop": 0));
}
}
} ) ;

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

ახლა JS შედის. რისთვისაც HEAD განყოფილებაში წერია: