ตัวอย่างการสร้างไดนามิกแบนเนอร์ใน HTML หากคุณไม่ทราบ HTML ให้ใส่โค้ดสำหรับแบนเนอร์ เพิ่มแบนเนอร์ใน ADFOX

แบนเนอร์ HTML5

รวม 2299 ถู

ในปัจจุบัน แบนเนอร์ HTML5 เป็นรูปแบบเดียวในปัจจุบันสำหรับโฆษณาแบนเนอร์แบบเคลื่อนไหวทั้งหมด รูปแบบข้ามแพลตฟอร์มที่เป็นสากลนี้ถูกแทนที่ด้วย Flash-banner ซึ่งสร้างเส้นขอบและข้อบกพร่องจำนวนมาก

สาเหตุหลักของพฤติกรรมดังกล่าวมีดังนี้:

• สำหรับเทคโนโลยี Flash การอ้างสิทธิ์ได้สะสมอยู่ในภาคสนาม ความปลอดภัยของคอมพิวเตอร์ซึ่งเพิ่มการลดแรงกดของตัวประมวลผลของอุปกรณ์ต่อพ่วงแบบเคลื่อนที่
• เบราว์เซอร์บางตัวเริ่มบล็อกการแสดง Flash เพื่อบล็อก;
• บน สิ่งก่อสร้างเคลื่อนที่ iOs (iPhone, iPad) ที่แสดงตัวอักษร Flash ไม่ได้ถูกส่งโดย virobnik;
• ความนิยมของโปรแกรมบล็อกเกอร์ในแบนเนอร์โฆษณา Flash;
• Vіdmova vіd podshої pіdtrimki ฉัน razvitie Flash-tehnologii її її vlasnik บริษัท Adobe

แบนเนอร์ HTML5 แบบเคลื่อนไหวสามารถแสดงแบบไร้ขอบในเบราว์เซอร์ใดก็ได้ บนหน้าจอ ฉันจะแนบอะไรก็ได้ รวมถึงสมาร์ทโฟน แท็บเล็ต และสื่อทีวี ที่ polygaє їх ข้ามแพลตฟอร์มและความเก่งกาจ

สำหรับผู้จัดการแบรนด์ แบนเนอร์ HTML5 หมายความว่าเราจะขยายกลุ่มเป้าหมายโดยไม่ต้องเสียเงิน

แบนเนอร์ HTML5 สามารถทำอะไรได้บ้าง?

บากาโต้. แม้ว่านี่จะเป็นรูปแบบขั้นสูงซึ่งให้ความเคารพต่อ koristuvach และ navit vzaєmodіє z เขา (แบนเนอร์แบบโต้ตอบ)

จากมุมมองของแอนิเมชั่น แบนเนอร์ดังกล่าวสามารถแสดงแอนิเมชั่นแบบเวกเตอร์ (โดยไม่ต้องปรับขนาด) แอนิเมชั่นของตัวละคร ภาพถ่าย แบบโลโก้ กราฟิกและไดอะแกรม ข้อความ และแสดงแอนิเมชั่น 3 มิติ จากมุมมองของการโต้ตอบ แบนเนอร์ HTML5 สามารถตอบสนองต่อความหลากหลายและเผยแพร่เนื้อหาและความเป็นไปได้เพิ่มเติมให้กับคุณ จากมุมมองของการพกพาสื่อ แบนเนอร์ HTML5 สามารถเล่นวิดีโอ สไลด์ และบันทึกเสียงได้ จากมุมมองของความสามารถในการปรับตัว แบนเนอร์ HTML5 สามารถขยายจนเต็มความกว้างของด้านข้าง ขยายแผงส่วนเสริม หรือขยายให้เต็มหน้าจอ

มาดูประเภทหลักๆ ของแบนเนอร์ HTML5 กัน

แบนเนอร์ HTML5 แบบเคลื่อนไหวที่มีขนาดคงที่
รูปแบบที่ได้รับความนิยมสูงสุดสำหรับสื่อโฆษณาส่วนใหญ่ ความกว้างและความสูงของแบนเนอร์ที่ต้องการจะถูกเลือกจากรายการที่ยอมรับก่อนการจัดวาง เราแสดงการขยายตัวที่กว้างที่สุดเสมอ

แบนเนอร์ HTML5 (แบบปรับได้, กูโมวี) ที่ยืดออก
นี่คือแบนเนอร์ที่สามารถยืดออกได้ครอบคลุมความกว้าง (และความสูง) ทั้งหมดของหน้าจอ (สามารถรับรู้รายงานได้ในบทความนี้)

แบนเนอร์ HTML5 แบบเต็มหน้าจอ
แบนเนอร์จะแสดงบนทั้งหน้าจอ ตามกฎแล้ว ให้ตั้งตัวจับเวลาเพื่อแสดงปุ่ม "ปิด" เป็นที่นิยมอย่างยิ่งสำหรับการแสดงผลบนส่วนขยายมือถือ

บ่อยครั้งที่แบนเนอร์ดังกล่าวสามารถปรับเปลี่ยนได้ด้วยการปรับการวางแนวต่างๆ และอนุญาตให้แนบกับมือถือได้

แบนเนอร์ HTML5 (ขยาย) เพื่อขยาย
มีเพียงแผงเริ่มต้นของแบนเนอร์ดังกล่าว (ทีเซอร์) บนหน้าจอ ภายใต้ชั่วโมงของการรออัลกอริทึมที่กำหนด (ชี้หมีหรือผลัก ตัวจับเวลา หรืออื่นๆ ที่ด้านข้าง) ส่วนอื่นของแบนเนอร์จะแสดงพร้อมข้อมูลเพิ่มเติม

แบนเนอร์วิดีโอ HTML5

ทันทีที่คุณกดโฆษณาหญิงสาว คุณสามารถแสดงวิดีโอคลิปราวกับว่ามันเริ่มอัตโนมัติ ดังนั้นหลังจากกดปุ่ม "เล่น" คุณสามารถแก้แค้นปุ่มและปิดเสียงได้ ไฟล์วิดีโอจะโฮสต์บนโฮสติ้งภายนอก และจะถูกนำไปแสดงเป็นเวลาหนึ่งชั่วโมง

แบนเนอร์แบบโต้ตอบของเกม
Baneri, yakіเรียก koristuvacha เปิดที่กลุ่ม vykonuyuchi ทำเองง่ายๆ

แบนเนอร์ดังกล่าวทำให้ผู้ชมเป้าหมายได้รับความเคารพ เรียกความสนใจอย่างมีชีวิตชีวา และในขณะเดียวกันก็สร้างขอบเขตที่ต่ำ (เช่น การกำหนดเป้าหมายของเมาส์บนสิ่งก่อสร้างบนมือถือ หรือการแลกเปลี่ยนสคริปต์เพิ่มเติม) เราจะบอกคุณอย่างแน่นอนเกี่ยวกับคุณสมบัติพิเศษของ vipadka เนื่องจากคุณได้ตัดสินใจสร้างแบนเนอร์ HTML5 ที่เล่นได้

แบนเนอร์ HTML5 อัจฉริยะ (เครื่องคิดเลข)
Vykoristovuyutsya สำหรับ zaluchennya และ vzaєmodії z koristuvachem, proponuyuchi yoma negainok razrahunok สำหรับพารามิเตอร์ที่ต้องการและสูตรที่กำหนดโดยอัลกอริทึมภายใน (ตัวอย่างเช่น เงินกู้ rozrakhunok, การจำนอง, vitrati budmaterialіv และการดำเนินการที่เงอะงะอื่น ๆ )

แบนเนอร์ HTML5 เพื่อแก้ไข– ในบางกรณี zamovnik จำเป็นต้องทำการเปลี่ยนแปลงแบนเนอร์อย่างรวดเร็วโดยไม่ต้องขอความช่วยเหลือจากผู้ค้าปลีก (เช่น ราคา vodsotki หรือใบเสนอราคาซึ่งมักจะมีการเปลี่ยนแปลง) เราสามารถทำงานดังกล่าวและป้อนพารามิเตอร์ที่จำเป็นโดยตรงไปยังโค้ด HTML ของแบนเนอร์ ซึ่งผู้จัดการสามารถทำการเปลี่ยนแปลงได้อย่างอิสระ คุณสามารถขอการตัดสินใจที่ดีขึ้นเกี่ยวกับวิธีการดูข้อมูลที่แบนเนอร์จะได้รับจากไฟล์ต้นฉบับ

แบนเนอร์ HTML5 ซึ่งใช้เพื่อปรับปรุงข้อมูลและ API ที่มีอยู่
ในขณะนี้มีป้ายโฆษณาจำนวนมากที่บล็อกแบนเนอร์ได้ถึง dzherelam เก่า. อย่างไรก็ตาม เนื่องจากแบนเนอร์ถูกวางบนไซต์ ซึ่งให้ความเป็นไปได้ดังกล่าว แบนเนอร์ HTML5 สามารถขอข้อมูลที่จำเป็น (ข้อความ ตัวเลข เครื่องหมายคำพูด) ไปยังไซต์ผ่านทาง API ซึ่งประมวลผลหลังจากอัลกอริทึมที่กำหนด แสดงข้อมูลที่ถูกต้อง ข้อมูล.

แบนเนอร์ 3D HTML5
แบนเนอร์ดังกล่าวเปลี่ยนความเคารพของ coristuvach สร้างแบบจำลองของภาพที่ด้านข้าง

แบนเนอร์ 3 มิติ HTML5 สามารถนำไปใช้ในมุมมองของวัตถุ ซึ่งล้อมรอบ ขอบของกรอบแบนเนอร์ ในมุมมองของหนังสือ ซึ่งเปิดอยู่ หรือเอฟเฟกต์ 3 มิติอื่นๆ

โปรดทราบว่าแบนเนอร์ HTML5 สามารถรวมคำอธิบายคุณลักษณะได้สองสามรายการ ตัวอย่างเช่น แบนเนอร์วิดีโอสามารถขยายได้ทั่วทั้งความกว้างของด้านข้าง และสามารถเล่นแอนิเมชั่น Trivimer ที่ด้านข้างได้

หากคุณต้องการสร้างแบนเนอร์ HTML5 บนไซต์ของเรา และความคิดสร้างสรรค์จะต้องใช้รูปแบบต่างๆ ผสมผสานกัน คุณควรให้ความสำคัญกับ fahivtsy ของเรา

HTML5-banner - ของคุณเองและทางเทคนิคคืออะไร?

วิธีที่ดีที่สุดคือยอมรับแบนเนอร์ HTML5 เป็นไซต์ขนาดเล็ก โดยไม่หยุดชะงัก.

HTML5 ชื่ออะไร รูปแบบแบนเนอร์є เลย์เอาต์ของฉันสำหรับเว็บไซด์ คาจูจิที่เรียบง่าย เลย์เอาต์ І verstaєtsya ตามกฎหมายเดียวกัน เป็นเว็บไซต์ที่ทันสมัย สามารถแทนที่ div-containers, fonts, ซึ่งเชื่อมต่อกัน สไตล์ cssและสคริปต์ js องค์ประกอบส่วนหัวคือคอนเทนเนอร์ภาพเคลื่อนไหวบนผืนผ้าใบ ตัวแอนิเมชั่นนั้นรับรู้ได้ด้วย ช่วยจาวาสคริปต์ซึ่งส่วนใหญ่ได้รับการพัฒนาเป็นพิเศษสำหรับแอนิเมชั่น js-libraries

มีอะไรอยู่ตรงกลาง? ใหม่ในเอกสารสำคัญ? ทำไมไฟล์เยอะจัง?

Aje mi zvikli, scho banner - tse หนึ่งไฟล์ภาพ JPG หรือ "gifka" หรือ "แฟลชไดรฟ์" แต่เดาว่าอย่างที่เราเขียนไปก่อนหน้านี้ แบนเนอร์ HTML5 เป็นไซต์ขนาดเล็ก ใส่ไฟล์ที่ไม่ระบุตัวตนและส่งไปยังสาวโฆษณาในไฟล์ zip ไฟล์เก็บถาวรประกอบด้วยไฟล์ HTML ส่วนหัว ไฟล์จาวาสคริปต์ ไลบรารี สไตล์ชีต และรูปภาพ

บันทึก. สำหรับโฆษณาบางประเภท คุณสามารถใช้แบนเนอร์ทั้งหมดในไฟล์เดียว รวมถึงสคริปต์และรูปภาพใหม่ทั้งหมดในรูปแบบเลขฐาน 64 นี่ไม่ใช่ปัญหาสำหรับผู้ค้าปลีกที่ผ่านการรับรอง อย่างไรก็ตาม การเพิ่มเงื่อนไขในการจัดทำแบนเนอร์และการแนะนำการเปลี่ยนแปลงใหม่สามารถช่วยได้ โชคดีที่ vimoga trapleyaetsya ดังกล่าวไม่บ่อยนัก

ฉันจะดูโฆษณาแบนเนอร์ HTML5 บนคอมพิวเตอร์ของฉันได้อย่างไร

แบบง่ายๆ แตกไฟล์ zip และเปิดไฟล์ซึ่งอยู่ตรงกลางของ HTML ในเบราว์เซอร์ของคุณ

ฉันจะเข้าใจผิดได้อย่างไรว่าฉันสร้างแบนเนอร์ HTML5 ที่ถูกต้อง

เช่นเดียวกับแบนเนอร์ที่สร้างขึ้นเพื่อการโฆษณา บริการของ Googleขึ้นอยู่กับบริการของคุณ เครื่องมือที่ยอดเยี่ยมสำหรับตรวจสอบคุณภาพงานของนักออกแบบ - ตัวตรวจสอบ HTML5 ออนไลน์จาก Google เป็นเรื่องง่ายที่จะตรวจสอบกับเขา: หยิบไฟล์ zip พร้อมแบนเนอร์และสงสัยว่าคุณได้ตรวจสอบรายการตรวจสอบแล้วหรือยัง การให้อภัยจะถูกทำเครื่องหมายด้วยป้ายสีแดง Yakshcho їх nemaє - ผู้ค้าปลีกของคุณไม่ฟรีและแบนเนอร์พร้อมที่จะวาง Google AdWordsหรือดับเบิลคลิก

สำหรับเครือข่ายโฆษณา Yandex, Mail.ru, Rambler, adFox, adRiver และอื่น ๆ นอกจากนี้ยังมีการตรวจสอบความถูกต้องของแบนเนอร์อีกครั้งเพื่อขอความช่วยเหลือทางเทคนิคหลังจากที่ถูกดึงดูดไปยังเว็บไซต์ของระบบ หากคุณมีปัญหา คุณสามารถใช้ความคิดเห็นของผู้ดูแลพร้อมคำอธิบายของการให้อภัย Deyakі Maidanchiki ให้โอกาสรองผู้โฆษณา การแก้ไขไปข้างหน้าแบนเนอร์ด้านการทดสอบ

ถึงกระนั้นการรับประกันที่ดีที่สุดของการเตรียมแบนเนอร์ HTML5 ที่ถูกต้องคือการอนุมัติของผู้ค้าปลีกและความรู้เกี่ยวกับวิธีการทางเทคนิคของการโฆษณา maydanchikiv และความพร้อมที่จะแก้ไขการให้อภัยในทันที

และแบนเนอร์ที่มีภาพเคลื่อนไหวใน Java Script - ทำไมอย่างอื่น

อย่าปล่อยให้ตัวเองหลงทาง "Java Script banner", "Canvas banner" - ทำด้วยตัวคุณเองเกี่ยวกับสิ่งที่เรียกกันทั่วไปว่า "HTML5 banner" js-library หรือกฎเลย์เอาต์สามารถเปลี่ยนแปลงได้ในลักษณะเดียวกับเครื่องมือของผู้ค้าปลีก แต่โครงร่างการเลือกทั่วไปจะถูกเติมด้วยอันเดียวกัน

จะสร้างแบนเนอร์ HTML5 ได้อย่างไร?

ตัวแก้ไขตัวออกแบบระดับกลางที่ได้รับความนิยมสูงสุดสำหรับการสร้างภาพเคลื่อนไหว HTML5 คือ โปรแกรมอะโดบีเคลื่อนไหว

Google ส่งเสริมเครื่องมือการพัฒนาของตนเอง - Google Web Designer ข้อดีอื่น ๆ ได้แก่ การมีเทมเพลตแบบไร้ใบหน้าและความเป็นไปได้ในการเผยแพร่แบนเนอร์โดยไม่ต้องมีคนกลางสำหรับบริการโฆษณาของ Google: AdWords และ Double Click ข้อเสียคือการลดลงของความเป็นไปได้ของภาพเคลื่อนไหว

นักออกแบบการแสดง ซึ่งส่วนใหญ่เป็นชาวอเมริกัน เป็นบรรณาธิการของไลบรารี Green Sock Animation Platform อย่างไรก็ตามในประเทศของเรากลิ่นเหม็นไม่เต็มความกว้างที่มีนัยสำคัญ

Vrakhovuchi ทุกอย่าง ส่วนประกอบที่จำเป็นเป็นตัวของตัวเอง เปิดรหัสผู้เชี่ยวชาญที่ดีสามารถสร้างแบนเนอร์ HTML5 ได้ง่ายที่สุด โปรแกรมแก้ไขข้อความ. อย่างไรก็ตาม วิธีการดังกล่าวไม่ได้ผล เทียบได้กับโปรแกรมแอนิเมชันระดับมืออาชีพ

การสนับสนุนด้านเทคนิคสำหรับแบนเนอร์ HTML5

Wimogs เร่งรีบ:

• แบนเนอร์พาดหัว HTML5 ในหน่วย kb;
• โครงสร้าง zip-archive จำนวนโฟลเดอร์และไฟล์
• การเปลี่ยนแปลงรูปแบบไฟล์ที่อนุญาต
• วิธีการเปิดใช้งานการส่ง URL เมื่อคลิกบนแบนเนอร์ (เฟิร์มแวร์ของแบนเนอร์);
• การถ่ายโอนไลบรารี js ที่อนุญาตบนโฮสต์ภายนอก
• ลำดับและการแลกเปลี่ยนการเชื่อมต่อของไฟล์วิดีโอและไฟล์เสียง
• Imogi ก่อนการออกแบบเฟรม ข้อจำกัดความรับผิดชอบ ความถี่และจำนวนรอบของภาพเคลื่อนไหว ฉันจะเพิ่มลงในโปรเซสเซอร์

ฉันอยู่ไกลจาก แปลใหม่เราสามารถโกงผู้ค้าปลีกของเราได้ เพื่อให้เราสามารถส่งแบนเนอร์ HTML5 ให้กับผู้จัดการ เพื่อเตรียมพร้อมสำหรับการเปิดตัวแคมเปญโฆษณาโดยไม่สะดุด

ฉันควรทำอย่างไรกับแบนเนอร์ Flash ที่สร้างขึ้นก่อนหน้านี้

ดูด้วยตัวคุณเอง - สื่อโฆษณาส่วนใหญ่ไม่ยอมรับแบนเนอร์ Flash ก่อนวางอีกต่อไป ส่วนประกอบ Flash ถูกบล็อกในเบราว์เซอร์และอุปกรณ์ iOs ปักหมุดหุ่นยนต์ Swiffy (ตัวแปลงแบนเนอร์ Flash ออนไลน์ที่เพียงพอสำหรับ HTML5 เท่านั้น)

การแปลงอัตโนมัติจากรูปแบบ Flash เป็น HTML5 นั้นแทบจะเป็นไปไม่ได้เลย อันที่จริง จำเป็นต้องแปลงเครื่องมือแก้ไข HTML5 ด้วยตนเอง ในสถานการณ์เช่นนี้ การตัดสินใจที่ถูกต้องคือการสร้างแบนเนอร์เคลื่อนไหวชุดใหม่ รูปแบบสากล HTML5.

แล้ว "gif" ล่ะ?

จำเป็นต้องเข้าใจว่าภาพเคลื่อนไหว GIF คืออะไร - ภาพชุดสุดท้ายของเฟรมเช่นในไฟล์วิดีโอ ไฟล์ GIF สามารถมีข้อมูลเกี่ยวกับความเร็วของการประมวลผลเฟรมและจำนวนการทำซ้ำ Tsim Yogo Mozhlivostі obmezhuyutsya

ไม่ยอมรับแบนเนอร์ GIF กราฟิกแบบเวกเตอร์, สร้างแอนิเมชั่นโดยทางโปรแกรม , ปรับให้เข้ากับ โรสแมรี่ที่จำเป็นและอื่น ๆ อีกมากมายที่แอนิเมชั่นแบนเนอร์ HTML5 สามารถจัดการได้อย่างง่ายดาย

หมายความว่าอย่างไรสำหรับผู้ลงโฆษณา

ปัญหาของวากะเหนือโลก ดังนั้นїyskhilnі navit banery โฆษณาที่ยอดเยี่ยมทั้งหมดของ Maidan แสดงโฆษณาแบนเนอร์เพียงไม่กี่หน่วยเป็นกิโลไบต์

แบนเนอร์ GIF เหมาะสำหรับการแสดงเฟรมคงที่สองสามเฟรม อาจมีภาพเคลื่อนไหวข้อความขนาดเล็ก หรือปุ่มเพื่อเปลี่ยนรูปภาพ ด้วยเหตุนี้แบนเนอร์ GIF จึงไม่ควรเกินขอบเขตของสาวโฆษณา

เมื่อแอนิเมชั่นเริ่มเปลี่ยนไม่กี่ร้อยเฟรม แบนเนอร์ gif ก็จะขยายใหญ่ขึ้น ราวกับว่าเป็นภาษาอังกฤษ "อย่างมาก" นั่นคือน่าทึ่ง gif 20 วินาทีที่มีเมกะไบต์จำนวนมากอยู่ทางด้านขวา ฉันไม่พอดีกับขอบ มาตรการโฆษณา, yakіอย่างถูกต้องturbovanі tim, sіlki trafіkuเกิดขึ้น zavantazhit koristuvachevіสำหรับการเยี่ยมชมแบนเนอร์อีกครั้ง

นอกจากนี้ เนื่องจากคุณต้องการแบนเนอร์ที่มีเอฟเฟกต์แอนิเมชันที่ไม่มีตัวตน แอนิเมชันของตัวละคร แบนเนอร์แบบโต้ตอบ ปรับเปลี่ยนได้ หรือวิดีโอ - เลือกแบนเนอร์ HTML5 เอง

ความสามารถในการปรับตัว- นี่เป็นหนึ่งในเกณฑ์ที่สำคัญที่สุดสำหรับไซต์ที่สร้างขึ้นพร้อมกัน หน้าจอcorystuvachіv vikoristuyut ที่อุดมไปด้วย โทรศัพท์มือถือเพื่อตรวจสอบแหล่งข้อมูลบนเว็บ เว็บไซต์มักจะสามารถแสดงโฆษณาแบนเนอร์ได้ และโฆษณาแบนเนอร์แบบดั้งเดิมนั้นไม่เหนียวเหนอะหนะ แบนเนอร์ GIF แบบแฟลชและแบบเคลื่อนไหวสามารถกำหนดขนาดของพิกเซลได้ ดังนั้นกลิ่นเหม็นจึงไม่เหมือนกันกับรูปแบบที่ปรับเปลี่ยนได้ในปัจจุบัน

พวกเราต้องการ วิธีการใหม่สร้างโฆษณาแบนเนอร์

พวกเราต้องการ แบนเนอร์แบบปรับได้ …

รูปแบบใหม่สำหรับโฆษณาแบนเนอร์

วิธีเดียวในการสร้างโฆษณาแบนเนอร์นั้นแปลกพอๆ กับเลย์เอาต์ HTML5 ของเรา แต่ก็สามารถทำได้ด้วย HTML5 บ่อยกว่านั้น อาจฟังดูเป็นความคิดอันศักดิ์สิทธิ์ แต่ฉันร้องเพลงคุณ แต่ไม่ใช่อย่างนั้น จริงๆ แล้วการโฆษณาใน HTML มีข้อดีหลายประการ

• การพากย์เสียงแบบ HTML พร้อมใช้งานแล้วและความหมายrozmіkaเพื่อปล้นพวกเขาด้วยsummіsnymที่มีสิทธิ์ต่างกัน
• ข้อความ รูปภาพ วิดีโอ Javascript และแบบฟอร์มคุณสามารถแสดงในแบนเนอร์ได้เหมือนเป็นเว็บไซต์
• แบนเนอร์สามารถบิดสคริปต์เซิร์ฟเวอร์ไดนามิกได้ bazi danikh นั้นตามความจำเป็น
• การพากย์เสียง HTML อาจใช้พื้นที่ดิสก์มาก
• การบำรุงรักษาแบนเนอร์ก็เหมือนกับเว็บโฮสติ้ง
• สวัสดี เทคโนโลยีใหม่สำหรับผู้ค้าปลีกทางเว็บ- เธอเป็นเหมือนการพัฒนาเว็บที่ยอดเยี่ยม
• และยอดเยี่ยม เสียงพากย์ HTML5 สามารถปรับให้เข้ากับขนาดใดก็ได้โดยใช้สื่อ CSS3— เฉพาะที่เราต้องการสำหรับแบนเนอร์แบบปรับได้!

Otzhe เราจะวางไข่โฆษณาแปลก ๆ ได้อย่างไร

เคล็ดลับเดียวคือการทำให้ iframe ขยายแบบไดนามิกโดยใช้สื่อ CSS3 ฉันจะบอกคุณเกี่ยวกับสามสิ่งต่อปี ... แต่โดยพื้นฐานแล้วทุกอย่าง!

เราประหลาดใจกับวิธีการทำงาน

แกนของการเรนเดอร์ HTML5 ของสต็อกแสดงในขนาดยอดนิยม 125×125 พิกเซล:

และแกนคือ goloshennya เดียวกันกับความกว้างที่คดเคี้ยว:

เคารพ ในฐานะที่เป็นปฏิกิริยาต่อการใส่ร้ายโฆษณาอื่น หากคุณเปลี่ยนขนาดหน้าต่างของเบราว์เซอร์ของคุณ ... จบเลย! 🙂

เค้าโครงที่ปรับเปลี่ยนตามอุปกรณ์จะเปลี่ยนไป เพื่อให้องค์ประกอบของด้านข้างมีขนาดเล็กเพื่อเปลี่ยนความกว้าง ซึ่งตอนนี้เป็นความรับผิดชอบของแบนเนอร์ในการตัดแต่งความกว้างของหน้าต่าง

ความสูงของแบนเนอร์ไม่ได้มีความสำคัญมากนักสำหรับการออกแบบที่ปรับเปลี่ยนได้ เราจึงสามารถเปลี่ยนความสูงได้ตามต้องการ ความสูงของ Ale vibir ไม่ได้หมายความว่าเสียงของเราติดอยู่ที่ความสูงนี้ เราสามารถกำหนดความสูงของ sprat สำหรับอาการชาที่ผิวหนังได้!

เพื่อให้ได้ผลรวมที่เหมาะสม การเปล่งเสียงแบบปรับได้คือความรับผิดชอบในการพิมพ์พิกเซลที่มีความสูงเท่ากัน เช่น แบนเนอร์แบบดั้งเดิม

ในทางทฤษฎี เราสามารถสร้างแบนเนอร์แบบปรับเปลี่ยนได้ แม้ว่าจะใช้ความกว้างหรือความสูงเท่าใดก็ได้ แต่ก็ไม่สามารถทำได้สำหรับการสร้างแบบทดสอบ

ฉันกำลังสนับสนุนความกว้างขั้นต่ำ 88 พิกเซลและแม่ของชุดความสูงมาตรฐานที่ไม่เหมาะสม:

• 31px "ไมโคร"
  ไมโครบาร์ (88 x 31)
• 60px "ปุ่ม"
  ปุ่ม 2 (120 x 60)
  แบนเนอร์สนับสนุน (234 x 60)
  แบนเนอร์ด้านบน (468 x 60)
• 90px "แบนเนอร์"
  ปุ่ม 1 (120 x 90)
  ลีดเดอร์บอร์ด (728 x 90)
• 125px "สี่เหลี่ยมเล็ก"
  ปุ่มสี่เหลี่ยม (125 x 125)
• 250px "สี่เหลี่ยมผืนผ้ากลาง"
  แบนเนอร์แนวตั้ง (120 x 240* ปิดท้าย!)
  หน้าต่างประกบสี่เหลี่ยม (250 x 250)
  สี่เหลี่ยมผืนผ้ากลาง (300 x 250)
• 400px "สี่เหลี่ยมใหญ่"
  สี่เหลี่ยมผืนผ้าแนวตั้ง (240 x 400)
• 600px "มาโรโช"
  มาโรโชส (120 x 600)
  hmarochos กว้าง (240 x 600)
  การประชาสัมพันธ์บน p_vstorinki (300 x 600)

ด้วยความสูงของพิกเซล ขณะที่ฉันเลือกมากขึ้น ทำให้เรามีช่วงแนวตั้งที่กว้างและความกว้างที่ผันแปรได้ เราจึงครอบคลุมขนาดโฆษณาแบนเนอร์ที่ได้รับความนิยมมากที่สุด เนื่องจากพวกเขาได้รับชัยชนะในวันนี้ แน่นอน เช่นเดียวกับแบนเนอร์ทั่วไป คุณสามารถสร้างขนาดที่ไม่ได้มาตรฐานได้ตามต้องการ

ไม่เพียงแค่นั้น โฆษณาแบนเนอร์สาธิตของฉันยังมีขนาดรวมน้อยกว่า 25 KB (HTML, CSS และ รูปภาพ JPG). น้อยลง ลดขนาดสูงสุดสำหรับไฟล์แบนเนอร์ขนาดเล็กหนึ่งอัน!

ลองใช้การปรับขนาดแบนเนอร์ใหม่เหล่านี้สำหรับซอฟต์แวร์โอเวอร์สแกนเสียงที่ปรับเปลี่ยนได้เพิ่มเติม

การเปลี่ยนอัตราเฟรมสำหรับการรองรับสื่อ CSS

บางครั้งคุณต้องการความสูงแบบตอบสนองสำหรับโฆษณา ซึ่งคุณจำเป็นต้องเปลี่ยนขนาด iframe สำหรับสื่อ CSS เพิ่มเติม ฉันสนใจอะไร วิธีที่สั้นที่สุดให้ตั้งค่าความกว้างและความสูงของ iframe เป็น 100% แทน และวางไว้ใน div ที่มีขนาดเฉพาะที่กำหนดไว้ใน CSS แกนมีลักษณะดังนี้:

แกน i css:

/* ความสูงเริ่มต้น */ #ad ( height:60px; ) @media only screen and (height:90px) ( /* 90 pixels high */ #ad ( height:90px; ) ) @media only screen and (height:125px; ) ( /* สูง 125 พิกเซล */ #ad ( สูง:125px; ) )

แสดงและคลิก

ดีที่สุดในการพากย์เสียง HTML5 - คุณสามารถดูได้ ช่วย Google Analytics เช่นเดียวกับเว็บไซต์ที่ยอดเยี่ยม

ซโรบิโม ป้ายโฆษณาสำหรับความช่วยเหลือเกี่ยวกับ CSS3 ในชั่วโมงนี้ ผมจะเพิ่มภาพเคลื่อนไหว CSS3 เท่านั้น เบราว์เซอร์ Firefoxและ WebKit Ale dosit เพียง zmusiti แบนเนอร์ pratsyuvati ในเบราว์เซอร์อื่น Prote หลังจากทดลองใช้เทคนิค CSS ใหม่ (โดยเฉพาะใน IE 7 และเก่ากว่า) เพื่อดูการทำงานที่น่าอัศจรรย์

บันทึก:เพื่อเป็นการประหยัดเวลา คำนำหน้าทั้งหมดของเบราว์เซอร์เบราว์เซอร์จะถูกละไว้ ดูรหัสในบันทึกผลลัพธ์

มาร์กอัป HTML

มาดูโครงสร้างของแบนเนอร์ HTML กัน ในขั้นตอนนี้ เป็นความรับผิดชอบของฉันที่จะต้องแสดงการทำงานของแอนิเมชั่น:

สำหรับความเข้าใจเชิงลึกเกี่ยวกับโครงสร้างโครงร่าง ให้เน้นที่เนื้อหา:

มีแอนิเมชั่นสามแบบโดยทั่วไป:

Vislizuvannya chovna ความชั่วร้าย หยุดสำหรับรายการที่ไม่มีลำดับ (กลุ่ม)

การเลียนแบบ rozgoduvannya chovna บนน้ำ Zastosovuєtsyaไปยังรายการ (chovna)

รูปลักษณ์ของสัญลักษณ์อาหาร หยุดองค์ประกอบ div (เครื่องหมายยกกำลัง)

หากคุณดูที่หน้าตัวอย่าง คุณสามารถบอกได้ว่าภาพเคลื่อนไหวสำหรับรายการ (แถบ) เป็นองค์ประกอบ div ตรงกลาง (เครื่องหมายยกกำลัง) ภาพเคลื่อนไหวเดียวกันคือ "แขวน" สำหรับรายการที่ไม่เรียงลำดับdієต่อรายการในรายการ (ป้ายที่ชัดเจนและอาหาร)

Otzhe คุณสามารถสร้าง visnovka ใหม่ scho องค์ประกอบเด็กนำแอนิเมชั่นของพ่อออกไปเพื่อเสริมการกระทำของพวกเขา ตอนนี้ก็มากเกินพอแล้วที่จะล้มล้างโครงสร้างของพ่อ/spadkoєmets

css

ก่อนอื่นให้เริ่มวิเคราะห์การสร้างแอนิเมชั่น คุณต้องมั่นใจในความปลอดภัยของสมองด้วยเบราว์เซอร์รุ่นเก่า

Zvorotnya sumistnіst

เราจะสร้างผลรวมได้อย่างปลอดภัยเพียงแค่ตั้งค่ารูปแบบเค้าโครงเช่นนี้ nibi ภาพเคลื่อนไหว CSSฉันไม่รู้. หากคุณต้องการดูหน้าในเบราว์เซอร์เก่า ให้เปิดภาพนิ่ง ไม่ใช่พื้นที่ว่าง

ตัวอย่างเช่น: จะแฮ็ค CSS ได้อย่างไร? podіbniyด้านล่างโฉบแล้วจะมีปัญหา:

/* ผิด! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Danish fade-in-animation div - oops!*/ animation : -fade-in-animation ของเรา 1s 1;

หากเบราว์เซอร์ไม่แสดงภาพเคลื่อนไหว องค์ประกอบ div จะถูกทำให้มองไม่เห็นโดยผู้ดูแล

และแกนนั้นปลอดภัยมากกับเบราว์เซอร์รุ่นเก่า:

/* FAVORITE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Danish div for fade in animation */ animation : -fade-in-animation ของเรา 1s 1;

ตอนนี้องค์ประกอบ div ปรากฏขึ้นเนื่องจากภาพเคลื่อนไหวไม่สามารถเรียกใช้ได้ และใน เบราว์เซอร์ปัจจุบัน div จะเป็นไฟล์แนบจำนวนมากสำหรับแอนิเมชั่นหนึ่งชั่วโมง

พื้นฐาน

ตอนนี้เรารู้วิธีที่จะรักษาจำนวนเงินที่เหมาะสม (เพื่อช่วยแก้ปัญหาสำหรับการทำงานหนึ่งชั่วโมงกับโครงการจริง) ได้เวลาสร้างฐานของโค้ด CSS ของเราแล้ว

จำเป็นต้องจำ 3 คะแนน:

เช่นเดียวกับแบนเนอร์ vikoristovuvatime บนเว็บไซต์ต่างๆ เราทำลายทั้งหมดของเรา ตัวเลือก CSSโดยเฉพาะ.กลิ่นเหม็นทั้งหมดเริ่มต้นด้วยตัวระบุ #ad-1 ในอันดับนี้ เรากำลังพยายามซ่อนโค้ดของเราและโค้ดของไซต์

เราอาจต้องการละเว้นการกระตุกของภาพเคลื่อนไหวในการตั้งค่า หากคุณต้องการปรับแต่งการแรเงาแอนิเมชั่นด้วยสไตล์ที่กำหนดและการมองเห็นองค์ประกอบที่อยู่เบื้องหลังการโปรโมต โครงสร้างแบนเนอร์จะถูกทำลายด้วยเอฟเฟกต์แร็ปหรือโดยลักษณะของส่วนต่างๆ ของภาพหลังจากแอนิเมชั่นเสร็จสิ้น แอนิเมชั่น zatrimka เลียนแบบสิ่งเล็กน้อยและปรับปรุงเฟรม

ถ้าเป็นไปได้ ชนะหนึ่งอนิเมชั่นสำหรับองค์ประกอบไม่กี่อย่างในอันดับนี้เราจะเผื่อเวลาไว้หนึ่งชั่วโมงและจะขยายรหัสในไม่ช้า

มาสร้างพื้นฐานสำหรับแบนเนอร์ของเรากันเถอะ มาทำให้มันง่ายสำหรับเธอในการจัดตำแหน่งตัวเองเพื่อให้สามารถวางองค์ประกอบภายในได้อย่างถูกต้อง รวมถึงทุกสิ่งที่อยู่นอกเหนือขอบเขตขององค์ประกอบ:

#ad-1 ( width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -ซ้ำ: ไม่ซ้ำ; ล้น: ซ่อน; ตำแหน่ง: สัมพันธ์; กล่องเงา: 0px 0px 6px #000;

มากำหนดสไตล์สำหรับข้อความและฟิลด์ของบทนำกัน เราคลิกที่ภาพเคลื่อนไหวต่างๆ จำเป็นต้องพิจารณาใหม่ด้วย เพื่อให้คุณสามารถค้นหาดัชนี z ที่ดีที่สุดสำหรับชิ้นส่วนที่ยุบตัว เพื่อไม่ให้กลิ่นเหม็นทับซ้อนกัน:

#ad-1 #content (ความกว้าง: 325px; float: right; margin: 40px; text-align: center; z-index: 4; ตำแหน่ง: สัมพันธ์; overflow: มองเห็นได้; ) #ad-1 h2 ( font-family: "Alfa Slab One", เล่นหาง; color: #137dd5; font-size: 50px; line-height: 50px; /* ปรากฏ h2 เพื่อจำลองการซีดจาง */ ) #ad-1 h3 ( ตระกูลแบบอักษร: "Boogaloo", เล่นหาง ; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 easy-in-out; /* ปรากฏ h3 พร้อมจำลองการเฟด */ ) #ad-1 form ( margin: 30px 0 0 6px; 12s 1 easy-in-out;/* mocking the form for enter an email address with simulacrum */) 16px, font-family: "Lucida Grande", ซานเซอริฟ; สี: #ffff; เส้นขอบ:1px ทึบ #a2917d; เค้าโครง: ไม่มี; กล่องเงา: -1px -1px 1px #fff; สีพื้นหลัง: #c7b29b; ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (216,201,185) 0%, rgb (199,178,155) 100%); ) #ad-1 #email:focus ( ภาพพื้นหลัง: linear-gradient(ด้านล่าง, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( ความสูง: 50px; float: ซ้าย เคอร์เซอร์: ตัวชี้; การเติม: 0 20px; ขนาดตัวอักษร: 20px; ตระกูลแบบอักษร: "Boogaloo", เล่นหาง; สี: #137dd5; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left : ไม่มี; สีพื้นหลัง: #fff; ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านล่าง, rgb (245,247,249) 0%, rgb ( (255,255,255) 100%);

ตอนนี้เราสามารถตั้งค่าสไตล์สำหรับไดรเวอร์และเราจะต้องเปลี่ยนแอนิเมชั่น:

#ad-1 ul#water( /* ต้องการภาพเคลื่อนไหวอื่นสำหรับน้ำ คุณสามารถเพิ่มได้ที่นี่ */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url(. . ) /images/ad-1/water-back.png), พื้นหลังซ้ำ: ซ้ำ-x; ดัชนี z: 1; ตำแหน่ง: แน่นอน; ด้านล่าง: 10px; ซ้าย: -20px แอนิเมชั่น: น้ำกลับแอนิเมชั่น 3s เข้า-ออกง่ายไม่สิ้นสุด; /* เลียนแบบการสาดน้ำ */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; .png), background-repeat: repeat-x; ดัชนี z: 3; ตำแหน่ง: แน่นอน; ด้านล่าง: -70px; ซ้าย:-30px; แอนิเมชัน: แอนิเมชันด้านหน้าน้ำที่จำลองการกระเซ็นของกระพือ แอนิเมชันจะนุ่มนวลขึ้นเล็กน้อยเพื่อสร้างเอฟเฟ็กต์เปอร์สเป็คทีฟ

กำหนดรูปแบบสำหรับองค์ประกอบสตริงและโยคะ นอกจากนี้ เราเรียกภาพเคลื่อนไหวต่อไปนี้:

#ad-1 ul#boat ( ความกว้าง: 249px; ความสูง: 215px; z-index: 2; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 25px; ซ้าย: 20px; ล้น: มองเห็นได้; แอนิเมชั่น: เรือในแอนิเมชั่น 3s 1 ง่ายออก /* เลื่อนกลุ่มเมื่อโฆษณาเริ่ม */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); Position : แน่นอน, ด้านล่าง: 0px, ซ้าย: 0px; ล้น: มองเห็นได้, ภาพเคลื่อนไหว: เรือแอนิเมชั่น 2s เข้า-ออกง่ายไม่สิ้นสุด; */ ) #ad-1 #question-mark ( ความกว้าง: 24px; ความสูง: 50px; พื้นหลัง- รูปภาพ: url(../images/ad-1/question-mark.png); ตำแหน่ง: สัมบูรณ์ ขวา: 34px ด้านบน: -30px ภาพเคลื่อนไหว:delayed-fade-animation 4s 1 ความง่ายในการเข้า-ออก /* เลือนเครื่องหมายคำถาม */ )

ตอนนี้มาสร้างสไตล์สำหรับความหนาวเย็น สำหรับพวกเขา แอนิเมชั่น vicoristovuvatimemo ของฉันที่มีเอฟเฟกต์ของการเคลื่อนไหวที่ไม่ได้สกิน ภาพประกอบแสดงให้เห็นถึงสาระสำคัญของแนวคิด:

และรหัส CSS แกน i:

#ad-1 #clouds ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; z-index: 0; ภาพเคลื่อนไหว: cloud-animation 30s เชิงเส้นไม่สิ้นสุด; /* เลื่อนไปทางซ้ายมืดมน ปล่อย และทำซ้ำ */ ) #ad-1 #cloud-group -1 ( ความกว้าง:720px; ตำแหน่ง: สัมบูรณ์; ซ้าย:0px; ) #ad-1 #cloud-group-2 ( ความกว้าง: 720px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 720px; ) #ad-1 .cloud-1 ( ความกว้าง : 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); Position: absolute; top: 10px; left: 40px; ) #ad-1 .cloud-2 ( width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); Position: absolute; top: -25px; left: 300px; ) #ad-1 cloud-3 ( ความกว้าง: 132px; ความสูง: 105px; ภาพพื้นหลัง: url(../images/ad-1/cloud-3.png); ตำแหน่ง: สัมบูรณ์; ด้านบน: -5px; ซ้าย: 530px; )

ภาพเคลื่อนไหว

คาดเดา:จากจุดนั้นไม่มีอะไรเคลื่อนไหวจริงๆ หากคุณประหลาดใจกับแบนเนอร์ของเราในทันที คุณจะเห็นภาพที่ไม่หยุดนิ่ง มีการสร้างแอนิเมชั่นที่นี่ ราวกับว่าพวกเขากำลังเรียกหารหัสที่เหนี่ยวนำ

ตอนนี้เราสามารถหายใจเข้าสู่ภาพนิ่งมหัศจรรย์ของเรา:

/* แอนิเมชันที่เลียนแบบ zatrimka ได้รับการพิสูจน์เพื่อแสดงองค์ประกอบบางอย่าง การเลียนแบบการแสดงความสามารถทำได้โดยเริ่มกระบวนการโดยมีความคืบหน้าของแอนิเมชั่น 80% (แต่ไม่ใช่ในทันที) นี่คือวิธีจำลองการเฟด: */ @keyframes delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animation สำหรับการแสดงรูปร่าง ที่อยู่อีเมลและปุ่ม รูปแบบคีย์เฟรมแอนิเมชั่น ( 0% (ความทึบ: 0; ขวา: -400px;) 90% (ความทึบ: 0; ขวา: -400px;) 95% (ความทึบ: 0.5; ขวา: 20px;) 100% (ความทึบ: 1 ; ขวา: 0px;) ) /* แอนิเมชันนี้วาดขึ้นเพื่อนำเรือออกจากหน้าจอไปยังซังของภาพยนตร์: */ @keyframes เรือในแอนิเมชัน ( 0% (ซ้าย: -200px;) 100% ( left : 20px;) ) /* แอนิเมชั่นสำหรับความหนาวเย็น hmar กลุ่มแรกเริ่มเคลื่อนที่จากกึ่งกลางและอีกกลุ่มหนึ่ง - ขวามือที่ด้านหน้าของหน้าจอ กลุ่มแรกแสดงอย่างถูกต้องบนหน้าจอ และอีกกลุ่มหนึ่งแสดงทางขวามือ ทันทีที่กลุ่มทางซ้ายเข้ามาใกล้ กลุ่มที่มืดมนก็หมุนอยู่ในตำแหน่ง cob แล้ว: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left : 0px;) ) / * ภาพเคลื่อนไหวที่เหลืออีกสามรายการนั้นเหมือนกันทุกประการ - ความแตกต่างนั้นแตกต่างกันไปตามองค์ประกอบที่วางตำแหน่ง กลิ่นเหม็นเลียนแบบการกระเซ็นของมหาสมุทร: */ @keyframes boat-animation ( 0% (ด้านล่าง: 0px; ซ้าย: 0px;) 25% (ด้านล่าง: -2px; ซ้าย: -2px;) 70% (ด้านล่าง: 2px; ซ้าย: - 4px;) 100% (ล่าง: -1px; ซ้าย: 0px;) ) @keyframes แอนิเมชั่นหลังน้ำ ( 0% (ล่าง: 10px; ซ้าย: -20px;) 25% (ล่าง: 8px; ซ้าย: -22px; ) 70% (ล่าง: 12px; ซ้าย: -24px;) 100% (ล่าง: 9px; ซ้าย: -20px;) ) @keyframes water-front-animation ( 0% (ล่าง: -70px; ซ้าย: - 30px;) 25% (ด้านล่าง: -68px; ซ้าย: -32px;) 70% (ด้านล่าง: -72px; ซ้าย: -34px;) 100% (ด้านล่าง: -69px; ซ้าย: -30px;) )

วิสโนวอค

ในระหว่างบทเรียน เราได้เรียนรู้แนวคิดหลักบางประการ:

1. องค์ประกอบของการสลายตัวดึงแอนิเมชันของบรรพบุรุษออกไปเพื่อเพิ่มแอนิเมชัน
2. ภายใต้ชั่วโมงที่สร้างแบนเนอร์ จำเป็นต้องพยายามชนะตัวระบุที่ไม่ซ้ำกัน เพื่อที่จะซ้อนทับโค้ดกับโปรเจ็กต์ CSS หลักโดยไม่ซ้ำกัน
3. ต้องเลือกตำแหน่งของสไตล์ขององค์ประกอบเพื่อไม่ให้มีภาพเคลื่อนไหวเพื่อความปลอดภัยของจิตใจ
4. หากเป็นไปได้ จำเป็นต้องชนะแอนิเมชันหนึ่งรายการสำหรับองค์ประกอบสองสามอย่าง

มีการใช้บล็อกแบบลอย (หรือเรียกอีกอย่างว่ายุบ แก้ไข ติดหนึบ) บนเว็บไซต์เพื่อทำให้องค์ประกอบที่ไม่เป็นระเบียบปรากฏขึ้นเมื่อเลื่อนด้านข้าง ซึ่งในกรณีนี้โฆษณามักจะถูกวางไว้ (ทีเซอร์ แบนเนอร์ หรือบริบท)

ขออภัย กฎของ Adsense ไม่ได้มีไว้ให้เราปกป้อง ทิมก็ไม่น้อยไปกว่ากัน มีอำนาจในไซต์มากมายและไม่สนใจกฎด้วยความกลัวและความเสี่ยงของเขาเอง อาจเป็นไปได้ว่าพวกเขาจะไม่ถูกลงโทษเพราะราคา แต่ฉันไม่ได้เสี่ยง

ฉันวาง RMYA ซึ่งเป็นทีเซอร์/แบนเนอร์ของฉันเองในบล็อกดังกล่าว และบางครั้งฉันก็แทนที่โฆษณาด้วย vivoj มีรายการที่คล้ายกัน หรือฉันจะขีดเส้นเพื่อให้ข้อมูล

มาดูกันว่าคุณสามารถสร้างบล็อกลอยบนไซต์ของคุณได้อย่างไร

ผู้จัดการ:สร้างบล็อกที่เหลือที่เสาชายหาด (แถบด้านข้าง) - ลอยตัว ก่อนหน้านั้นไวน์จะติดอยู่ในขณะนั้นหากคอรีสตูวัคมาถึงไวน์ใหม่โดยการเลื่อนและไม่ได้เปิดด้านข้างทันที นอกจากนี้ บล็อกสามารถ "vіdlipati" ไปถึงส่วนท้าย (เพื่อหลีกเลี่ยงการบิด)

วิธีการทำงานที่ดีที่สุด

มีตัวเลือกมากมายสำหรับการติดตั้งบล็อกที่ติดอยู่ แต่ไม่ใช่ว่ากลิ่นเหม็นทั้งหมดจะทำงานได้อย่างถูกต้อง ฉันจะพูด ใบรับรองพิเศษ: วิธีการติดตั้งแบบเดียวกันสามารถใช้กับบล็อกบนไซต์หนึ่งได้ และ jamb จะปรากฏบนไซต์อื่น

ด้านล่างคือส่วนท้ายของบล็อกลอยซึ่งติดตั้งจริงในทุกไซต์ที่ฉันติดตั้งไว้ ไม่มีสันดอน เครื่องยนต์ก็ไม่สำคัญเช่นกัน (DLE, WordPress, LiveStreet เป็นต้น)

ใส่รหัส HTML ต่อไปนี้ในเมืองพุกามของคอลัมน์สีขาว:

$(หน้าต่าง).เลื่อน(ฟังก์ชั่น() (
var sb_m = 20; /*ใส่บน-ล่าง*/
var mb = 300; /*ความสูงสำรอง*/
var = $(หน้าต่าง).scrollTop() ;
var sb = $(".บล็อกเหนียว");
var sbi = $(".inner.sticky-block");
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();

ถ้า(sb_h + $(เอกสาร).scrollTop() + sb_m + mb< $(document) .height () ) {
ถ้า(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop": h));
}
อื่น(
sb.css(("paddingTop": 0));
}
}
} ) ;

จากที่สามารถตั้งรหัสทั้งหมดเป็นสัตว์จากด้านล่างและนำความสูงของฐานของคุณ tobto ความสูงนั้น เดอบล็อกจำเป็นต้องลับให้คมขึ้น

ตอนนี้ JS รวมอยู่ด้วย ซึ่งเขียนไว้ในส่วน HEAD: