HTMLda dinamik banner yaratishga misol.

Golovna

Sozlanmoqda

RUB

Zamoviti

• Hozirgi vaqtda HTML5 bannerlari to'liq vaqtli animatsion banner reklamasi uchun yagona joriy formatdir. Ushbu universal kross-platforma formati Flash bannerlarining o'rnini egalladi, bu bir qator cheklovlar va kamchiliklarni bartaraf etadi. Ushbu turdagi depressiyaning asosiy sabablari:
• Flash texnologiyasidan oldin, da'volar sohasida to'plangan
• kompyuter xavfsizligi va mobil qurilmalarning qayta ishlash quvvatini oshirish; Ba'zi brauzerlar Flash ekranini bloklashni boshladilar;
• yoqilgan
• mobil qurilmalar

iOs (iPhone, iPad) Video protsessorni o'tkazmasdan Flash displey;

banner Flash reklama uchun bloker dasturlarning mashhurligi;

Biz Vlasnik, Adobe tomonidan Flash texnologiyasini qo'llab-quvvatlash va rivojlantirishni ko'ramiz.

Animatsiyalangan HTML5 bannerlari istalgan brauzerda, istalgan qurilma, jumladan smartfonlar, planshetlar va media-televidenie ekranida muammosiz ko‘rsatilishi mumkin.

Bu uning o'zaro faoliyat platformasi va ko'p qirraliligi bilan bog'liq.

Veb-sayt menejeri uchun HTML5 bannerlarining qo'shilishi biz hech qanday pul sarflamasdan auditoriyamizni kengaytirishimiz mumkinligini anglatadi.

HTML5 banneri nima qilishi mumkin?
Boy.

Bu mijozning hurmatini va u bilan o'zaro munosabatni (interaktiv banner) jalb qiladigan rivojlangan formatdir.
Animatsiya nuqtai nazaridan, bunday banner vektor animatsiyasini (miqyoslash xarajatlarisiz), belgilar animatsiyasini, fotosuratlarni, logotiplarni, grafik va diagrammalarni, matn va 3D animatsiyani ko'rsatishi mumkin.

Interaktiv nuqtai nazardan, HTML5 banneri muxbirning harakatlariga javob berishi va qo'shimcha tarkib va ​​imkoniyatlarni targ'ib qilishi mumkin.
Banner butun ekranda ko'rsatiladi.

Qoida tariqasida, taymer "Yopish" tugmasini ko'rsatadi.

Mobil qurilmalarda ko'rsatish uchun ayniqsa mashhur.
Ko'pincha bunday banner turli yo'nalishlarga mos kelishi va mobil qurilmaga ruxsat berishi mumkin.

HTML5-banner (rozkriv).

Dastlab ekranda bunday bannerning faqat boshlang'ich paneli (teaser) mavjud.

Belgilangan algoritm oxirida (sichqonchani ko'rsatish yoki bosish, taymer yoki sahifadagi boshqa funktsiyalar) bannerning boshqa qismi qo'shimcha kengaytirilgan ma'lumotlar bilan ochiladi.
HTML5 video banner.

Agar siz reklama platformasini sinchkovlik bilan sozlasangiz, videoni avtostart bilan ham, "O'ynash" tugmasini bosgandan keyin ham ko'rsatishingiz mumkin.

Ovoz yordamida tugmalarni almashtirishingiz mumkin.
Video fayl tashqi hostingda joylashtirilishi kerak va uni ko'rsatish vaqtida ko'rish mumkin.

O'yin interaktiv bannerlar. Guruhni yoqish uchun koristuvachni chaqiradigan Baneri oddiy harakatlar bilan yakunlanadi.

Bunday bannerlar maqsadli auditoriya e'tiborini tortadi, katta qiziqish uyg'otadi va shu bilan birga kam ta'sirga ega (masalan, mobil qurilmalarda maqsadlilikning keng tarqalganligi yoki qo'shimcha ma'lumotlar skriptlarini almashish).
Oʻyin HTML5 bannerini yaratishga qaror qilganingizda, bu xususiyatlar haqida tez orada sizga xabar beramiz. "Aqlli" HTML5 bannerlari (kalkulyatorlar). Vicoristovy koronistning xirillashi uchun xirillab, yoma isboti formula algoritmi (ko'tarish, qarzga rosrahuki, ipoteki, vitrati guldastasi -) bilan ichki tomonidan belgilanadigan o'tkazilayotgan parametrlar ortida rosrahunkining bema'niligidir. tu ínshí, mos kelmaydigan operatsiyalar).

HTML5 bannerlari, nimani tahrirlash kerak
Bunday bannerlar mijozning hurmatini tortadi, sahifada ko'rsatilgan uch o'lchamli modellarni yaratadi.

HTML5 3D banneri oʻralgan obyekt shaklida, banner ramkalari oʻrnini bosuvchi banner koʻrinishida, ochilayotgan kitob koʻrinishida yoki boshqa 3D effektlar bilan amalga oshirilishi mumkin.

Esda tutingki, HTML5 banneri quyida tavsiflanganidek kiritilishi mumkin.

Masalan, video banner sahifaning butun kengligini qamrab olishi mumkin va foydalanuvchi harakatlariga qarab sahifada ahamiyatsiz animatsiya ko'rsatiladi.

Agar siz HTML5 bannerini veb-saytimizga joylashtirmoqchi bo'lsangiz va ijodiy g'oya turli formatlarning kombinatsiyasini talab qiladi - bu har doim bizning vakillarimizning vakolatida bo'ladi.

HTML5 banneri - buning texnik tomoni nimada?

HTML5 banneriga mini-sayt sifatida qarash yaxshidir. Mubolag'asiz. HTML5, unga nom beradi banner formati Bu mening veb-sahifalar sxemasi, tuyulganidan ko'ra soddaroq, tartib. Va u xuddi boshqa veb-saytlar kabi bir xil qonunlarga amal qiladi. Siz div konteynerlarini, kiritilgan shriftlarni,

css uslublari

bu js skripti.

Asosiy element tuval animatsiya konteyneridir.

Animatsiyaning o'zi yordamida amalga oshiriladi

iltimos java ga yordam bering

skript, ko'pincha animatsiya uchun maxsus ishlab chiqilgan turli JS kutubxonalaridan.

O'rtada nima bor? Arxivda nima bor? Sizning xizmatingizda dizayner ishining sifatini tekshirish uchun ajoyib vosita - Google-dan onlayn HTML5 validator. Uni ishlatish juda oson: banner bilan zip arxivingizni oling va nazorat ro'yxatidan o'tganmisiz deb hayron bo'ling. Tuzatishlar qizil belgilar bilan belgilanadi.

Hech kim yo'qligi sababli - sizning distribyutoringiz bejiz ishlamadi va banner joylashtirishdan oldin tayyor Google adWords yoki Ikki marta bosing.

Reklama tarmoqlari Yandex, Mail.ru, Rambler, adFox, adRiver va boshqalar tizim veb-saytiga jalb qilinganidan keyin bannerning texnik vositalarga tegishliligini tekshirishni talab qiladi.

Muammolaringiz bo'lsa, moderatorning sharhini muammoning tavsifi bilan olib tashlashingiz mumkin.

Maydan faollari reklama bo'yicha deputatga vakolat beradi

Oldindan orqaga qarayman

test sahifasida banner. Va shunga qaramay, HTML5 bannerini to'g'ri tayyorlashning eng katta kafolati - ishlab chiquvchining bilimi, uning reklama platformalarining texnik afzalliklarini bilishi va muammolarni tezda tuzatishga tayyorligi. Java skriptidagi animatsiyali banner boshqachami?

O'zingizni yo'qotishingizga yo'l qo'ymang.

"Java Script banneri", "Canvas banner" - odatda "HTML5 banneri" deb ataladigan narsaga o'ting.

Biroq, js-libraries va tartib qoidalarini ishlab chiquvchi vositasida o'zgartirish mumkin, aks holda asl yig'ish sxemasi yo'qoladi. HTML5 bannerini qanday yaratish mumkin? Dizaynerlar orasida HTML5 animatsiyasini yaratish uchun eng mashhur muharrir Adobe dasturi Jonlantirish. Google o'zining dizayn vositasi - Google Web Designerni taqdim etadi. Uning afzalliklari orasida shaxsiy bo'lmagan shablonlarning mavjudligi va to'g'ridan-to'g'ri Google reklama xizmatlari uchun bannerni nashr etish imkoniyati mavjud: AdWords va Double Click.

Kamchiliklar orasida animatsiyaning cheklangan imkoniyati mavjud.

Bir nechta dizaynerlar, ko'pincha amerikalik, Green Sock Animation Platform kutubxonasining muharrirlari.

• Biroq, bizning badbo'y hidimiz sezilarli darajada oshmadi.
• Hamma narsani aldash
• zarur komponentlar
• o'zlarini ifodalaydi
• maxfiy kod
• , yaxshi mutaxassis HTML5 bannerini eng oddiy usulda yaratishi mumkin
• Kadrlar, rad etishlar, animatsiya sikllarining chastotasi va sonini loyihalash va qurilma protsessoriga ta'sir qilish uchun ishlatilishi mumkin.

Va uzoq emas yangi qayta o'sish Biz distribyutorlarimizga tayanib, agentni joylashtirish va reklama kampaniyasini kechiktirmasdan boshlash uchun tayyor HTML5 bannerini taqdim etishimiz mumkin edi.

Ilgari yaratgan Flash bannerlarim bilan nima qilishim mumkin?

O'zingizga e'tibor bering - ko'pchilik reklama tarmoqlari joylashtirishdan oldin Flash bannerlarini qabul qilmaydi, Flash komponentlari brauzerlarda va iOS qurilmalarida Swiffy (HTML5 da Flash bannerlari uchun yagona mos onlayn konvertor) yordamida bloklanadi.

Flash formatini HTML5 ga avtomatik o'zgartirish deyarli mumkin emas - bu HTML5 muharririni qo'lda o'zgartirishni talab qiladi. Bunday vaziyatda yangi animatsion bannerlar to'plamini yaratish to'g'ri qaror bo'ladi universal format

HTML5.

"Gifs" haqida nima deyish mumkin?

Shuni tushunish kerakki, har qanday GIF animatsiyasi, xuddi videofayllardagi kabi, tasvirlar va ramkalarning yakuniy to'plamidir. GIF faylida kadrlarni qayta ishlash tezligi va takrorlanishlar soni haqidagi ma'lumotlar bo'lishi mumkin. Faqat biz farqlashimiz mumkin. GIF banneridan foydalanib boʻlmaydi vektor grafikasi

, animatsiyani dasturiy tarzda yarating, moslashtiring

talab qilinadigan o'lcham

HTML5 banner animatsiyasi osongina bajara oladigan boshqa ko'plab narsalar mavjud.

Bu reklama beruvchi uchun nimani anglatadi? Supermundane vaga muammosi. Shunday qilib, bannerlarni osib qo'yish juda yaxshi.

Barcha ajoyib reklama platformalari kilobaytlarda juda qattiq banner hajmini ko'rsatadi.

GIF banneri bir nechta statik ramkalarni, ehtimol matnning kichik animatsiyasi, tugmalar yoki fotosuratlarni o'zgartirish uchun yaxshi. Bunday holda, GIF bannerining reklama kvadratlari chegarasidan tashqariga chiqmasligi muhimdir. Animatsiya yuzlab kadrlarni o'zgartirganda, gif banneri ingliz tilida aytganidek, "dramatik", ya'ni keskin o'sadi. veb-resurslarni ko'rib chiqish.

Veb-saytlarda ko'pincha banner reklamalari mavjud va an'anaviy banner reklamalari unchalik yaxshi emas. Flash va animatsiyali GIF bannerlari piksel o'lchamlarini aniqlaydi, bu hozirgi sezgir tartiblarda bunday emas. Bizga kerak

yangi yo'l banner reklama yaratish. …

Bizga kerak

moslashuvchan bannerlar

• Banner reklama uchun yangi format Reklama bannerlarini bizning HTML5 sxemalarimiz kabi noyob qilishning yagona yo'li ularni HTML5 da yaratishdir.
• Avvaliga bu ilohiy g'oyaga o'xshab ko'rinishi mumkin, lekin men sizga aytaman, unday emas. Aslida, HTML bilan reklama qilishning afzalliklari juda ko'p.
• HTML ma'lumotlari hamma joyda mavjud, va semantik belgilar ular ustida turli ruxsatlar bilan ishlaydi.
• Matn, rasmlar, video, Javascript va shakllar
• Vikoristani xuddi veb-sayt kabi bannerda bo'lishi mumkin.
• Bannerlar dinamik server skriptlarini vikorize qilishi mumkin va kerak bo'lganda ma'lumotlarga asoslanadi. HTML bloat diskda juda ko'p joy egallashi mumkin. Bannerlarga texnik xizmat ko'rsatish haqiqatan ham veb-xosting bilan bir xil.
• Yo'q yangi texnologiyalar veb-o'quvchilar uchun

— asl veb-ishlab chiqish kabi, xuddi shunday.

va eng muhimi

HTML5 blankini qo'shimcha CSS3 media so'rovlari yordamida istalgan hajmga moslashtirish mumkin

- bular bizga moslashtirilgan bannerlar uchun kerak bo'lgan narsalardir!

Xo'sh, qanday qilib reklama yaratishimiz mumkin?

Yagona hiyla - CSS3 media yordamida iframe o'lchamlarini dinamik qilish, men sizga bu haqda bir oz aytib beraman ... Lekin, asosan, hamma narsa!

Keling, bu qanday ishlashiga hayron bo'laylik

125x125 piksel o'lchamdagi mashhur HTML5 stunnerining o'qi ko'rsatilgan:

Va o'q bir xil hayratlanarli kenglikdir:

Brauzer oynasining o'lchamini o'zgartirganingizda, boshqa reklamalar qanday munosabatda bo'lishini bilib oling... Bu ajoyib!

🙂

• Moslashuvchan sxemalar yon elementlarning kichik o'zgaruvchan kengligiga ega bo'lishi uchun yaratilgan, shuning uchun bannerlar endi bunga erishishlari kerak.
  mikrobar (88 x 31)
• 60px "tugma"
  tugma 2 (120 x 60)
  pastki banner (234 x 60)
  Old banner (468 x 60)
• 90px "banner"
  1-tugma (120 x 90)
  yetakchilar jadvali (728 x 90)
• 125px "kichik to'rtburchaklar"
  kvadrat tugma (125 x 125)
• 250px "o'rta tik"
  vertikal banner (120 x 240* yaqin masofaga yetib boring!)
  kvadrat termoyadroviy oyna (250 x 250)
  o'rta tik (300 x 250)
• 400px "ajoyib tekis kesuvchi"
  vertikal tekis kesgich (240 x 400)
• 600px "khmarochos"
  khmarochos (120 x 600)
  keng hmarochos (240 x 600)
  takrorlashda ajoyib (300 x 600)

Men tanlagan bu piksel balandliklari bizga bugungi kunda mashhur bo'lgan banner reklamasining eng mashhur o'lchamlarini qamrab oluvchi vertikal va o'zgaruvchan kengliklarning keng doirasini beradi.

Albatta, an'anaviy bannerlardan farqli o'laroq, ehtiyojlaringizga qarab nostandart o'lchamlarni yaratishingiz mumkin. Nafaqat bu, balki mening demo banner reklamamning narxi 25 KB dan kam (HTML, CSS va JPG tasvir

).

Bu bitta kichik bannerning maksimal fayl hajmidan kamroq, kamroq!

Moslashuvchan bannerlarni tekshirish uchun qoʻshimcha dasturlar yordamida yangi banner oʻlchamlarini sinab koʻring. Qo'shimcha CSS media elementlari yordamida ramka hajmini o'zgartirish Ba'zan sizga reklama uchun javob balandligi kerak bo'ladi, bu esa CSS media tasmasi yordamida iframe hajmini o'zgartirishni talab qiladi.

allowtransparency = "to'g'ri"

kengligi = "100%"

/* 90 piksel balandligi */

balandligi: 90px; @media faqat ekran va (balandlik: 125px)/* 125 piksel balandligi */

balandligi: 125px; Taassurotlar va bosishlarni ko'paytirish Eng chiroyli HTML5 xususiyatlari - ular bilan birlashtirilishi mumkin iltimos Googlega yordam bering Boshqa veb-saytlarda bo'lgani kabi analitik.

Zrobimo Saytdagi joyni tejash uchun barcha brauzer prefikslari o'tkazib yuborilgan.

Chiqish yozuvlaridagi kodga qarang.

HTML tartibi

Elektron pochta manzillari...

Meni yetakla

Tartib tuzilishini chuqurroq tushunish uchun quyidagilarga e'tibor qaratamiz:

Asosan uchta animatsiya mavjud:

Vislizuvannya chovna zliva.

Tartibsiz roʻyxat (guruh) holati.

Suvni isitishga taqlid qilish. Ro'yxatga tushing (chovna). Oziq-ovqat belgisi paydo bo'ldi.

Div elementiga (oziq-ovqat belgisi) murojaat qiling.

Agar siz demo sahifasiga qarasangiz, ro'yxat elementi uchun animatsiya (chown) ham uning o'rtasida joylashgan div elementi (oziq-ovqat belgisi) ekanligini ko'rishingiz mumkin.

Ro'yxatdagi narsalarning tartibsiz ro'yxati uchun "swish" animatsiyasi ham mavjud (choven va oziq-ovqat belgisi).

Xo'sh, siz yana tartibsiz bo'lishingiz mumkin, shuning uchun bolalar elementlari sizning harakatlaringizdan tashqari otalarning animatsiyalarini to'xtating.

Endi Ota/Spadkoemets tuzilmasini qayta ixtiro qilishning hojati yo'q.

CSS

Birinchidan, yaratilgan animatsiyani tahlil qilishni boshlashdan oldin eski brauzerlarda hech qanday muammo yo'qligiga ishonch hosil qilishimiz kerak.

Gateway yig'indisi

Bu kabi tartib uslublarini belgilash orqali biz burilishni kafolatlashimiz mumkin

CSS animatsiyasi Umuman hech narsa yo'q. Agar siz eski brauzeringizda sahifani ko'rishni istasangiz, bo'sh joyni yo'qotish o'rniga statik tasvirdan boshlang.

Masalan: nima uchun CSS-ni vikorizatsiya qilasiz?

induktsiyadan pastroqqa o'xshash bo'lsa, unda muammolar paydo bo'ladi:

/* NOGIR! */ @keyframe bizning animatsiyamiz ( 0% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) div ( shaffoflik: 0; /* Daniyacha div zamovchuvannyam - opp! */ animatsiya: bizning -fade -animatsiyadagi 1s 1;

Brauzer animatsiyani qo'llab-quvvatlamaganligi sababli, div elementi foydalanuvchi uchun ko'rinmas holga keladi. Va biz eski brauzerlar bilan muammoga duch kelishimiz aniq: /* VIRNO */ @keyframe bizning animatsiyamiz ( 0% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) div ( shaffoflik: 1; /* Daniya div bachimo sahna ortida */ animatsiya: bizning -fade-in-animation 1s 1; Endi div elementi animatsiyani boshlay olmayotgandek ko'rinadi. Barcha hidlar ID #ad-1 bilan boshlanadi.

Shunday qilib, biz kodimiz va sayt kodimizni qayta yozishimiz mumkin bo'ladi. Biz animatsiyani muzlatishga e'tibor bermaslik niyatidamiz o'rnatishlarda.

Animatsiyani ma'lum bir uslubda animatsiya orqasidagi elementlarning ko'rinishi bilan o'chirishni tanlasangiz, animatsiya tugagandan so'ng, banner tuzilishi rapp elementlar yoki tasvir yuzasi tomonidan yo'q qilinadi. Animatsiyani soyalash ramkalarning murakkabligi va sozlanishiga bog'liq. Agar iloji bo'lsa

Ko'p elementlar uchun bitta animatsiya yaratamiz.

Shunday qilib, biz vaqtni tejaymiz va kod hajmini tezlashtiramiz.

Keling, bannerimiz uchun asos yarataylik.

#ad-1 #content (kengligi: 325px; float: oʻng; hoshiya: 40px; matnni tekislash: markaz; z-indeks: 4; joylashuv: nisbiy; toʻldirish: koʻrinadigan; ) #ad-1 h2 ( shrift-family: "Alfa Slab One", kursiv: #137dd5; -fade-animation 10s 1 ease-in-out */ ) #ad-1 formasi (chegara: 30px 0 0 6px; 12s 1 ease-in-out;/* Xiralashgan elektron pochta manzilini kiritish uchun shaklni tahrirlash * /) 16px, shrift oilasi: "Lucida Grande", sans -serif; rang: #ffff;

chegara: 1px qattiq #a2917d;

kontur: yo'q;

quti soyasi: -1px -1px 1px #fff;

#ad-1 ul#boat (kenglik: 249px; balandlik: 215px; z-indeks: 2; pozitsiya: mutlaq; pastki: 25px; chap: 20px; toʻlib-toshish: koʻrinadigan; animatsiya: qayiqda animatsiya 3s 1 ta qulaylik /* Reklama boshlanganda guruhni siljitadi */ ) #ad-1 ul#boat li (kengligi: 249px; balandlik: 215px; fon tasviri: url(../images/ad-1/boat.png); pozitsiyasi : mutlaq, pastki: 0px, chap: 0px; to'ldirilishi: ko'rinadigan, animatsiya: qayiq-animatsiya 2s cheksiz qulaylik */ ) #ad-1 #savol belgisi ( kengligi: 24px; balandlik: 50px; fon-; image: url(../images/ad-1/question-mark.png): mutlaq: -30px animatsiya: soʻroq belgisida 4s; / )

Endi hmar uchun uslublar yarataylik.

Ular uchun biz terisiz rok effekti bilan animatsiyani vikoristovatimemo qilamiz.

Rasm g'oyaning mohiyatini ko'rsatadi:

Eksa va CSS kodi:

#ad-1 #bulutlar (pozitsiya: mutlaq; tepa: 0px; z-indeks: 0; animatsiya: bulut-animatsiya 30s cheksiz chiziqli; /* Chapga aylantiring, oʻtkazib yuboring va takrorlang */ ) #ad-1 #cloud-group - 1 (kenglik:720px; joylashuv: mutlaq; chap:0px; ) #ad-1 #bulut-guruhi-2 (kenglik: 720px; pozitsiya: mutlaq; chap: 720px; ) #ad-1 .cloud-1 (kenglik : 172px; balandlik: url(../images/ad-1/cloud-1.png); /ad-1/cloud-2.png); yuqorida: -25px; bulut-3 (kenglik: 132px; balandlik: 105px; fon-tasvir: url(../images/ad-1/cloud-3.png); joylashuv: mutlaq; tepa: -5px; chap: 530px; )

Animatsiyalar

/* To'xtash harakati bilan animatsiya bir nechta elementlarni ko'rsatish uchun ishlatiladi.

O'chirishni taqlid qilish jarayonni animatsiyaning 80% ishlayotgan (yoki darhol emas) bilan boshlash orqali ishlaydi.

Shunday qilib, siz har qanday rangsizlanishni yaratishingiz mumkin: */ @keyframes delayed-fade-animation ( 0% (shaffoflik: 0;) 80% (shaffoflik: 0;) 100% (shaffoflik: 1;) ) /* Shakl e-pochtasini ko'rsatish uchun animatsiya manzil va tugma.

1. Tasvirga taqlid qilish ham vikorist */ @keyframes forma-animatsiya ( 0% (shaffoflik: 0; o'ng: -400px;) 90% (shaffoflik: 0; o'ng: -400px;) 95% (shaffoflik: 0,5; o'ng: 20px;) 100% (shaffoflik: 1; oʻngda: 0px;) ) /* Ushbu animatsiya videoning yon tomonidagi ekran orqasida koʻrsatish uchun ishlatiladi: */ @keyframes boat-in-animation ( 0% (chapda: -) 200px;) 100% (chapda : 20px;) ) /* Tushkunlik uchun animatsiya.
2. Birinchi guruh markazda qo'l bilan boshlanadi, ikkinchisi esa ekran oldida o'ng qo'l bilan boshlanadi.
3. Birinchi guruh ekrandan butunlay olib tashlanadi, ikkinchisi esa o'ng qo'lda ko'rinadi.
4. Faqat chap guruh birlasha boshlagach, ular o'zlarining kob holatida tezroq aylanadilar: */ @keyframes bulutli animatsiya (0% (chapda: 0px;) 99,9999% (chapda: -720px;) 100% (chapda: 0px); ;) ) / * Qolgan uchta animatsiya deyarli bir xil - farq pozitsion elementlarda.

Okeandagi hidlar sachragan ovozga ega: */ @keyframes boat-animation ( 0% (pastki: 0px; chap: 0px;) 25% (pastki: -2px; chap: -2px;) 70% (pastki: 2px;) ; chap: - 4px;) 100% (pastki: -1px; chap: 0px;) ) @keyframes suv orqa animatsiyasi ( 0% (pastki: 10px; chap: -20px;) 25% (pastki: 8px; chap; : -22px; ) 70% (pastki: 12px; chap: -24px;) 100% (pastki: 9px; chap: -20px;) ) @keyframes water-front-animation ( 0% (pastki: -70px; chap): -30px;) 25% (pastki: -68px; chap: -32px;) 70% (pastki: -72px; chap: -34px;) 100% (pastki: -69px; chap: -30px;) )

Afsuski, biz AdSense qoidalarini himoya qilmaymiz.

Tim kam emas, ko'plab hukumat saytlari o'z xavf-xatarlari va xavf-xatarlari bilan qoidalarni e'tiborsiz qoldiradilar.

Ehtimol, ular jinoyatlari uchun jazolanmasligi kerak, lekin men ularni jazolamoqchi emasman.

Men o'zimning tizerlarimni/bannerlarimni bunday bloklarga joylashtiraman va ba'zida reklama o'rniga u yerda shunga o'xshash yozuvlarni hamda ma'lumot berish uchun foydali ma'lumotlarni ko'rsataman. Keling, veb-saytingizda qanday qilib suzuvchi blok yaratishingiz mumkinligini bilib olaylik.

Zavdannya:

barrel ustunida (yon panelda) qolgan blokni yarating - suzuvchi. Bundan tashqari, u sahifa ochilgandan so'ng darhol emas, balki keyingi varaq bo'lgandagina yopishtirilishi kerak. Bundan tashqari, blokda pastki qismga etib boradigan "zarba" bor (shuning uchun siz uni kesib o'tmaysiz).

Eng yaxshi ish usuli

Yopishqoq blokni amalga oshirishning ko'plab variantlari mavjud, ammo ularning hammasi ham to'g'ri ishlamaydi.

Men sizga aytaman
maxsus bildirishnoma
: blokni o'rnatishning bir xil usuli bitta saytda ishlatilishi mumkin, ammo boshqasida jamblar paydo bo'ladi.
Quyida men o'rnatgan deyarli barcha saytlarda ishlatiladigan suzuvchi blokning misoli keltirilgan.
Hech qanday jamblar yo'q edi.
Dvigatel ham muhim emas (DLE, WordPress, LiveStreet va boshqalar).
Barrel ustunining kerakli joyiga quyidagi HTML kodini kiriting:
$(oyna).scroll(funktsiya() (
var sb_m = 20;

/ * hayvonga pastdan kirish */< $(document) .height () ) {
var mb = 300;
/ * podvalning ombordan balandligi */
var = $(window).scrollTop() ;
}
var sb = $(".yopishqoq-blok");
var sbi = $(".yopishqoq blok .ichki");
}
}
} ) ;

var sb_ot = sb.offset() .top;

var sbi_ot = sbi.offset() .top;