ดาวน์โหลดภาพเคลื่อนไหวการเปลี่ยนหน้า บทเรียน: การพลิกดูเอกสาร ปุ่มที่ยอดเยี่ยมพร้อมเอฟเฟกต์ CSS ที่สวยงาม

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

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

เรามาลองใช้เครื่องมือบางอย่างเพื่อสร้างผลิตภัณฑ์ข้อมูลที่ยอดเยี่ยมเหล่านี้กันดีกว่า

แอปพลิเคชันเดสก์ท็อปยอดนิยมคือ Flip Builder ดาวน์โหลด Constructor นี้เพื่อพลิกดูเอกสาร PDF จากเว็บไซต์อย่างเป็นทางการของผู้พัฒนา กำลังเปิด หน้าแรกที่อยู่: flipbuilder.comและโดยการคลิกที่ธงของสหพันธรัฐรัสเซียเราจะทำการ Russify คลิกปุ่ม "เรียนรู้เพิ่มเติม" ไปที่หน้าดาวน์โหลด และคลิก "ดาวน์โหลด" เพื่อเริ่มกระบวนการดาวน์โหลด เมื่อการดาวน์โหลดเสร็จสิ้น ให้แตกไฟล์ zip แล้วรัน ไฟล์การติดตั้ง: flip-pdf-pro.exe

เราทำตามขั้นตอนของวิซาร์ดการติดตั้งและในหน้าต่างสุดท้ายให้คลิกปุ่ม "ลอง" หลังจากนี้อินเทอร์เฟซแอปพลิเคชันจะเปิดขึ้นและเราเริ่มทำงาน

คลิกปุ่มสีเขียว “สร้างใหม่” หน้าต่าง "นำเข้า PDF" จะปรากฏขึ้น โดยใช้ปุ่ม "ดู" เปิด Explorer และเลือกไฟล์ PDF ที่เตรียมไว้สำหรับการแปลงบนคอมพิวเตอร์ของคุณ จากนั้นคลิกปุ่ม "นำเข้าทันที":

หลังจากนั้นครู่หนึ่ง เอกสารจะเปิดขึ้นในแอปพลิเคชัน และพร้อมที่จะพลิกดู ตอนนี้คุณสามารถเริ่มแก้ไขและเพิ่มองค์ประกอบเพิ่มเติมลงไปได้

ขั้นแรก เรามาฝึกใช้เทมเพลตเพื่อออกแบบเอกสารกันก่อน เทมเพลตตามที่ระบุไว้ในความคิดเห็นนั้นแตกต่างกันไม่เพียงเท่านั้น รูปร่างแต่ยังทำหน้าที่:


เมื่อเลือกเทมเพลตที่เหมาะสมแล้ว ให้ขยายเมนูการตั้งค่า ด้วยการเปลี่ยนค่าขององค์ประกอบในรายการ คุณสามารถปรับโหมดการแสดงผลของพาเนล ปุ่มควบคุม และอื่นๆ อีกมากมาย:


เราสร้างเทมเพลตเสร็จแล้วและไปยังส่วนการแก้ไข

ต่อไปเป็นตัวอย่าง ฉันจะแสดงรายละเอียดว่าฉันสร้างโบรชัวร์มัลติมีเดียได้อย่างไร - การสำรวจประวัติศาสตร์สั้น ๆ ที่ดินพื้นเมือง- เขียนหนังสือเกี่ยวกับอัลมาตี เขียนไว้ว่าพูดดังแน่นอน คัดลอกและวางจาก แหล่งที่มาที่แตกต่างกันคำอธิบายเหตุการณ์สำคัญในความคิดของฉันเหตุการณ์จากประวัติศาสตร์ของเมือง ฉันได้แก้ไขตามความจำเป็นและจัดเรียงตามลำดับเวลา ฉันอธิบายเนื้อหาด้วยรูปภาพที่เหมาะสม ฉันดำเนินการทั้งหมดนี้ใน Word หลังจากนั้น ฉันกำหนดหมายเลขหน้าโดยเริ่มจากหน้าที่สามและสร้างสารบัญเชิงโต้ตอบตามที่อธิบายไว้ในบทเรียน: ไฮเปอร์ลิงก์ใน Word จากนั้นฉันก็บันทึกเอกสารจาก Word เป็นรูปแบบ PDF

สำหรับการพากย์ ก่อนหน้านี้ฉันได้เตรียมไฟล์เสียงในรูปแบบ MP3 สำหรับแต่ละหน้า - ฉันรวมแทร็กข้อความเข้ากับแทร็กพื้นหลัง ฉันมิกซ์เสียงโดยใช้แอพพลิเคชั่น Audacity คุณสามารถดาวน์โหลดโปรแกรมเวอร์ชันล่าสุดได้จากเว็บไซต์อย่างเป็นทางการของนักพัฒนาที่: http://www.audacityteam.org

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

กลับมาที่นักออกแบบ Flip PDF Professional กันดีกว่า

ในตัวแก้ไขหน้าพลิกของโปรแกรมนี้ ให้ใช้ปุ่ม "เพิ่มเติม" เพื่อขยายรายการ องค์ประกอบเพิ่มเติมและเลือกแผนก “เพิ่ม” เครื่องเล่นเสียง":

หน้าต่าง "Sound Type" จะปรากฏขึ้น - ประเภทของเครื่องเล่นที่เราเลือกประเภทของเครื่องเล่นแล้วใส่ลงใน เปิดหน้าเอกสาร:

ตอนนี้ในหน้าต่างที่สามขวาของหน้าต่างตัวแก้ไขให้คลิกปุ่ม "เลือกเสียง" ไปที่ Explorer ค้นหาไฟล์เสียงที่เตรียมไว้ก่อนหน้านี้สำหรับหน้านี้บนคอมพิวเตอร์แล้วเปิด:

ในส่วนนี้เราจะกำหนดค่าโหมดการทำงานของผู้เล่น ฉันตั้งค่าการเล่นให้เริ่มเมื่อคุณคลิกที่เครื่องเล่น เพื่อให้ผู้อ่านมีทางเลือก: อ่านเพื่อตัวเองหรือฟัง และฉันเลือกที่จะปิดเสียงเมื่อออกจากหน้า:

คุณยังสามารถแก้ไขหน้าปกของผู้เล่นได้ในหน้าต่างนี้

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

หากต้องการเผยแพร่เอกสารมัลติมีเดียที่เสร็จแล้ว ให้ใช้ปุ่ม "แปลง" เพื่อเปิดรายการรูปแบบที่เสนอและเลือกรูปแบบที่เหมาะสม:


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

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


แต่ในทางกลับกัน ในแอปพลิเคชันสาธิตของตัวสร้างนี้ ไม่มีข้อจำกัดเกี่ยวกับปริมาณของเอกสาร ซึ่งแตกต่างจาก โปรแกรมที่คล้ายกันตัวอย่างเช่น FlippingBook อยู่ที่ไหน รุ่นทดลองโหลดได้เพียงสิบหน้าเท่านั้น

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

ภาพเคลื่อนไหวการเปลี่ยนหน้า CSS3

ใน Burzhunet ฉันพบเทคนิคการเปลี่ยนหน้าที่ใช้ใน CSS3 น่าประทับใจมาก! ด้วยเทคนิคนี้ ฉันจึงตัดสินใจสร้างตัวอย่างของตัวเองเพื่อสาธิตหนังสือ CSS3 ที่มีแอนิเมชั่นการพลิกหน้า
เทคนิคนี้ขึ้นอยู่กับคุณสมบัติ CSS3 เช่น แปลงร่างและ การเปลี่ยนแปลงรวมถึงการใช้แท็กที่ไม่ได้มาตรฐาน ป้อนข้อมูลพร้อมช่องทำเครื่องหมาย การใช้งานกลายเป็นสิ่งที่ผิดพลาดเนื่องจากเบราว์เซอร์ยังไม่รองรับคุณสมบัติ CSS3 ที่มีประสิทธิภาพสูงสุดอย่างเต็มที่ แบบฟอร์มโดยตรง- แต่ต้องขอบคุณ ที่ทำให้เราสามารถลองใช้ประโยชน์จากคุณสมบัติเหล่านี้ได้ในตอนนี้
ข่าวดีก็คือบางทีในอนาคตอันใกล้นี้เบราว์เซอร์จะเริ่มเข้าใจมาตรฐาน CSS3 ใหม่ และผู้ดูแลเว็บจะสามารถนำความสวยงามดังกล่าวไปใช้กับไซต์ของตนได้อย่างปลอดภัย และเป็นไปได้ที่จะเปลี่ยนหน้าใน CSS3
ตัวอย่างนี้ดูได้ดีที่สุดบนเบราว์เซอร์ มอซซิลา ไฟร์ฟอกซ์ เวอร์ชันล่าสุด- ทุกอย่างทำงานได้โดยไม่มีปัญหา ตัวอย่างนี้ใช้งานได้ใน Safari และ Chrome แต่มีปัญหา Opera กินโปรเซสเซอร์ในระหว่างแอนิเมชั่นดังนั้น คอมพิวเตอร์ที่อ่อนแอตัวอย่างก็ใช้งานไม่ได้ IE ก็คือ IE เพื่อความสนุกสนาน คุณสามารถดูมันได้ด้วย
เราดูด้วยเบราว์เซอร์ มอซซิลา ไฟร์ฟอกซ์- อย่าทำให้เสียความประทับใจ!

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

วันนี้ฉันต้องการนำเสนอบทเรียนเด็ด 15 ข้อจากเว็บไซต์ที่ยอดเยี่ยมนี้แก่คุณ “ชิป” ทั้งหมดนั้นฟรีและคุณสามารถดาวน์โหลดได้อย่างง่ายดาย ทีนี้เรามาดูกันดีกว่า

คุณอาจสนใจสิ่งนี้:

ตารางไดนามิกพร้อมแอนิเมชั่นที่สวยงาม

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

วิธีสร้างเอฟเฟกต์โฮเวอร์รูปภาพสุดเท่ด้วย CSS

บทช่วยสอนนี้จะแสดงวิธีสร้างเอฟเฟกต์ซูเปอร์โฮเวอร์บนรูปภาพ ในตัวอย่างมีมากถึง 7 ตัวอย่างที่แตกต่างกันรวมถึงคำแนะนำในการสร้างปาฏิหาริย์นี้โดยใช้ CSS

ปุ่มที่ยอดเยี่ยมพร้อมเอฟเฟกต์ CSS ที่สวยงาม

มากมาย ตัวอย่าง CSSปุ่มที่มีเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยม คุณสามารถปรับแต่งปุ่มเหล่านี้ให้เหมาะกับรสนิยมของคุณได้

วิธีทำเปียโน

บทเรียนที่ยอดเยี่ยมที่บอกวิธีสร้างเปียโนไฟฟ้าจริงสำหรับเว็บไซต์ของคุณ

เอฟเฟกต์โฮเวอร์ที่สวยงามสำหรับไอคอน

มี 9 ตัวอย่างในบทช่วยสอนนี้ที่มี สไตล์ที่แตกต่างเมื่อคุณวางเมาส์เหนือไอคอน ทุกอย่างดูมีสไตล์และทันสมัยมาก ตัวอย่างเช่น คุณสามารถใช้เอฟเฟกต์เหล่านี้กับไอคอนได้อย่างอิสระ บุ๊กมาร์กโซเชียลบนเว็บไซต์

การพลิกบล็อกอย่างมีประสิทธิภาพ

ที่นี่คุณจะได้เรียนรู้วิธีการทำด้วย ใช้ CSSการพลิกบล็อกอย่างมีประสิทธิภาพ นอกจากนี้ยังมี 5 ตัวอย่างที่แตกต่างกันโดยสิ้นเชิง

ตัวอย่างดีๆ ของการใช้ภาพเคลื่อนไหว CSS

ต่อไปนี้เป็นตัวอย่าง 4 ตัวอย่างที่แสดงรายละเอียดว่าภาพเคลื่อนไหว CSS มีความสามารถอะไรบ้าง

แบบฟอร์มการค้นหาที่ผิดปกติ

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

วิธีการแสดงรูปภาพต่าง ๆ สำหรับอุปกรณ์ต่าง ๆ

ที่นี่คุณจะได้เรียนรู้วิธีการใช้งานจอแสดงผล รูปภาพที่แตกต่างกันขึ้นอยู่กับอุปกรณ์ที่ใช้ดูทรัพยากรของคุณ

การสร้างเมนูแบบปรับได้พร้อมการรองรับจอแสดงผล Retina

บทเรียนที่ยอดเยี่ยมซึ่งคุณจะได้เรียนรู้วิธีสร้างความสวยงามและ เมนูตอบสนองบน CSS พร้อมรองรับหน้าจอ Retina

เอฟเฟกต์การพลิกหน้า CSS หลายรายการ

เอฟเฟกต์สวยงามที่คุณสามารถเปลี่ยนหน้าเต็มหน้าจอได้

แอนิเมชัน - การพลิกหน้า

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

สร้างหลายเลเยอร์ เลเยอร์ใหม่ทำงานอยู่ - กดคีย์ผสม Ctrl+J สำหรับบทเรียนนี้ ฉันได้สร้างเลเยอร์ใหม่ 4 เลเยอร์ - เพื่อสิ่งที่ดีกว่าและ แอนิเมชั่นที่น่าสนใจ- ควรมีเลเยอร์มากกว่านี้ แต่เพื่อที่จะเข้าใจวิธีสร้างแอนิเมชั่น - มันก็เพียงพอแล้ว

ปิดตาในทุกชั้น ยกเว้นชั้นหลักและชั้นที่ 1 เลเยอร์ -1 ทำงานอยู่ - เราจะดำเนินการแก้ไข กดปุ่ม Ctrl+T (เราเรียกว่าเครื่องมือ - การแปลงแบบฟรี) - สี่เหลี่ยมผืนผ้าจะปรากฏขึ้นรอบๆ รูปภาพ โดยมีศูนย์กลางอยู่ตรงกลาง เลื่อนศูนย์กลางนี้ด้วยเมาส์ไปที่ตรงกลางด้านซ้ายของสี่เหลี่ยม - สัมพันธ์กับจุดนี้แล้วเราจะเปลี่ยนหน้าของเรา

เราจะเริ่มบีบทางด้านขวา - เลื่อนด้วยเมาส์

แต่เมื่อหน้าเปลี่ยนไป มันก็ "เล่น" นิดหน่อย เพื่อให้ดูเป็นธรรมชาติมากขึ้น ตอนนี้เราจะทำงานกับเพจนี้ โดยไม่ต้องลบส่วนที่เลือก - Free Transform คลิกขวาที่รูปภาพใน Photoshop แล้วเลือกฟังก์ชัน - Distort

และบิดเบือนแผ่นงานเล็กน้อยโดยยกมุมขวาล่างและมุมขวาบนขึ้น

ไปที่เลเยอร์ - เลเยอร์ -2 ใช้คีย์ผสม Ctrl+T เรียก Free Transform บีบอัดแผ่นงานให้มากขึ้น บิดเบือนมัน - นี่คือลักษณะที่ทุกอย่างควรมีลักษณะ ภายใต้เลเยอร์ที่สองที่ฉันเปิดไว้ให้คุณ เลเยอร์ -1 เพื่อให้คุณเห็นว่าราคาเท่าไหร่ เพื่อบีบอัดและบิดเบือน


นอกจากฟังก์ชัน - Distort แล้ว คุณยังสามารถใช้ฟังก์ชัน - Deformation ได้อีกด้วย ซึ่งจะทำให้คุณมีโอกาสเปลี่ยนรูประนาบของใบไม้ได้ หน้าง่ายมันสามารถโค้งงอได้จากลมหากพลิกผ่านหรือจากมือของบุคคล แต่คุณสามารถลองด้วยตัวเอง - ทดลองและดูผลลัพธ์ที่คุณได้รับ
ไปกับเลเยอร์ Layer -3 เราใช้ปุ่มต่างๆ เพื่อเรียกใช้ฟังก์ชันการแปลงแบบอิสระ อย่าลืมย้ายจุดศูนย์กลางไปที่กึ่งกลางของระนาบซึ่งสัมพันธ์กับที่เราหมุน (พลิก) แผ่นหนังสือของเรา บีบอัดและบิดเบือนมัน


ไปที่เลเยอร์ - เลเยอร์ -4 - บีบอัดบิดเบือนมัน


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

เฟรมแรก - เราเปิดช่องมองบนเลเยอร์หลักซึ่งเราไม่ได้ทำงานด้วย ตั้งค่าการหน่วงเวลาเป็น 0.2 วินาที


สร้างเฟรมที่ซ้ำกัน


เฟรมที่สอง - รวมเลเยอร์หลักและเลเยอร์ -1 แล้ว
เฟรมที่สาม - เลเยอร์หลักและเลเยอร์ -2 เปิดอยู่
เฟรมที่สี่ - เลเยอร์หลักและเลเยอร์ -3 เปิดอยู่
เฟรมที่ห้า - เลเยอร์หลักและเลเยอร์ -4 เปิดอยู่
เฟรมที่หก - รวมเฉพาะเลเยอร์หลักเท่านั้น

มาดูกันว่าเราได้อะไรบ้าง


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

ขอให้ทุกคนโชคดี!

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

สิ่งที่คล้ายกันเกิดขึ้นกับหนังสือ มีคนอ่านหนังสือกระดาษน้อยลงเรื่อยๆ อ่านง่ายกว่ามาก e-booksซึ่งมีราคาถูกกว่ากระดาษมากหรือมีให้ดาวน์โหลดฟรีด้วยซ้ำ

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

ปลั๊กอิน

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

ปลั๊กอินนี้จะช่วยให้คุณสามารถฝังสิ่งพิมพ์ที่สร้างด้วย FlippingBook Publisher และ FlippingBook Online ได้ในขั้นตอนเดียวโดยไม่ต้องทำการเปลี่ยนแปลงโค้ดใดๆ

Easy Flip Flip เป็นปลั๊กอินที่คุณสามารถสร้างได้ นิตยสารเสมือนจริงเพียงไม่กี่คลิก

3D FlipBook เป็นโปรแกรม โปรแกรมดู PDFหรือ ปลั๊กอินเวิร์ดเพรสซึ่งช่วยให้คุณดูภาพ, PDF หรือไฟล์ HTML ในลักษณะปัดนิ้วได้

***

Page Flip Book สำหรับ WordPress เป็นวิธีที่ง่ายที่สุดในการจัดการหนังสือ 3 มิติเสมือนจริงที่คุณสามารถดูได้ด้วยเมาส์
คุณสามารถเลือกได้เช่นกัน ภาพพื้นหลังหรือพื้นผิวถ้าคุณต้องการ

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

GoWorks Flip Clock แสดงนาฬิกาพลิกย้อนยุคที่ทันสมัยบนเพจและโพสต์ของคุณ ปลั๊กอิน เหมาะอย่างยิ่งสำหรับการดึงดูดความสนใจ ข้อมูลสำคัญมีเอฟเฟ็กต์ภาพที่น่าดึงดูด

บทช่วยสอนเกี่ยวกับวิธีสร้างเค้าโครง PageFlip แบบเต็มหน้าจอโดยใช้ BookBlock แนวคิดก็คือเนื้อหาของเว็บไซต์ในรูปแบบหนังสือสามารถเข้าถึงได้ผ่านการดึงออก แถบด้านข้างเมนู.

หนังสือเรียนนำเสนอ CSS บริสุทธิ์และกรอบการพลิกหน้า 3 มิติ

คุณสามารถแปลงโดยใช้รหัสพิเศษ:

1

    2
  1. หน้า 1
  2. 3
  3. หน้า 2
  4. 4
  5. หน้า 3
  6. 5

ใน ช่วงเวลาปัจจุบัน Page Flip โดยใช้ภาพเคลื่อนไหว CSS3 ใช้งานได้ใน Safari และ iPhone

บทช่วยสอนนี้จะแนะนำคุณตลอดกระบวนการทั้งหมดในการสร้างเอฟเฟกต์การเปลี่ยนหน้าของคุณเองโดยใช้ JavaScript

Joe Lambert จะแนะนำคุณตลอดกระบวนการสร้างการออกแบบเพจที่น่าทึ่งสำหรับเว็บไซต์แกลเลอรีรูปภาพของคุณ

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างวงกลมที่มีแฮนเดิลที่เปิดขึ้นเมื่อคุณคลิก สร้างเอฟเฟกต์ 3D ที่สมจริง และเปลี่ยนหน้าโดยใช้การแปลงและเงา CSS 3D