Thẩm quyền giải quyết. Quảng cáo biểu ngữ

Ở đây bạn sẽ tìm thấy hướng dẫn về cách xây dựng Thanh trượt biểu ngữ jQuery

Video này cho bạn biết cách Thanh trượt biểu ngữ jQuery hoạt động trên trang!

Xây dựng thanh trượt tuyệt vời và bắt mắt của bạn với mẫu Wow Slider độc quyền này. Nó có một số hiệu ứng nhất thời tuyệt vời để thay đổi hành vi của bản trình bày nhằm thu hút sự chú ý của người xem. Các chấm điều hướng nhỏ ở trên cùng bên phải và các nút trước/tiếp theo hiện đại ở hai bên mang lại góc nhìn đầy đủ mà không ảnh hưởng đến chất lượng hình ảnh của bạn. Ngoài ra, kiểu phông chữ đẹp và độc đáo dành cho phần mô tả văn bản càng làm tăng vẻ đẹp và vẻ chuyên nghiệp của thanh trượt. Chủ đề Pinboard này có khung màu trắng dày cũng như các nút mũi tên trông khác lạ và đẹp mắt. Bạn có thể định cấu hình mẫu này để mở rộng thanh trượt theo toàn bộ chiều rộng của trình duyệt hoặc tối ưu hóa mẫu cho máy tính bảng và điện thoại di động.

Trong khi phát triển thanh trượt của mình, bạn có thể thêm nhiều tham số hơn để làm cho nó mượt mà và độc đáo.

Các trang web có thanh trượt được sử dụng nhiều trong thiết kế web và thu hút rất nhiều khách truy cập. Wow Slider cho phép bạn tạo thanh trượt của riêng mình với vô số điều chỉnh, hơn 50 thiết kế độc đáo và hơn 25 hiệu ứng chuyển tiếp và hiệu ứng.

Wow Slider không cần bất kỳ kỹ năng mã hóa nào. Các thanh trượt này tương thích với các trang WordPress và Joomla giúp các công cụ tìm kiếm dễ dàng thu thập dữ liệu trang web một cách hiệu quả.

Chọn mẫu Wow Slider tuyệt vời này và xuất bản thanh trượt tuyệt vời tiếp theo của bạn trong vòng vài phút!

Với cả thanh trượt wowslider và thanh trượt css, tôi có thể sử dụng chúng làm thanh trượt toàn chiều rộng của trang chủ không? Họ có phản ứng nhanh không? Tôi rất thích sử dụng một trong những thứ này nhưng đặc biệt là thanh trượt CSS làm thanh trượt tiêu đề trang chủ hoặc ngay bên dưới điều hướng tiêu đề có chiều rộng đầy đủ trong wordpress để không có lề ở bên trái và bên phải.

Hãy cho tôi biết hoặc gửi cho tôi một liên kết hiển thị một trang web được thực hiện theo cách đó.

Có, nó phản hồi nhanh và bạn có thể sử dụng nó với chủ đề WP của mình.

Tôi rất muốn thấy một trang web sản xuất có tiêu đề có chiều rộng đầy đủ như một trong các trang web của tôi. Đó là loại thanh trượt mà tôi tò mò về sản phẩm của bạn.

Bạn có thể dán thanh trượt vào bất kỳ tệp php chủ đề nào bằng mã này

mã ngắn wowslider ở đâu. Theo mặc định, thanh trượt đầu tiên là "wowslider1" Lúc đầu, hãy tạo thanh trượt và tải mô-đun WP lên WP. Hướng dẫn này có thể giúp bạn Sau đó dán mã ngắn vào bất kỳ tệp chủ đề WP nào bạn muốn.

Một câu hỏi khác nếu sản phẩm của bạn có điều này. Có thể có một thanh trượt chỉ trượt các hình thu nhỏ theo chiều rộng của trang web...như ngang trên cùng với chiều cao có thể là 150px. Chúng sẽ dừng lại theo từng khoảng thời gian giống như bất kỳ thanh trượt nào khác. Nếu bạn nhấp vào hình thu nhỏ, nó sẽ mở hình ảnh có kích thước đầy đủ trong một lớp phủ hoặc nếu được đặt, nó có thể liên kết đến một url là trang nội bộ hoặc bên ngoài. Tôi có nhu cầu về thứ tương tự trên một số trang web...không thể tìm thấy thứ gì tương tự trong plugin wp

Nó trông giống như một sản phẩm khác của chúng tôi - VisualLightbox. Bạn có thể sử dụng nó như một plugin cho WordPress. Vui lòng truy cập http://visuallightbox.com và xem nó có phù hợp với bạn không.

Xin lỗi đã không đọc hết hướng dẫn...video có thể được thêm vào

Tôi đang sử dụng wowslider trên các trang wordpress của mình...hoạt động tốt hơn hầu hết các plugin khác. Tôi tự hỏi liệu bạn có sản phẩm nào cho phép thanh trượt có video thay vì hình ảnh tĩnh không? Tôi đã thấy một trang web có video và bạn có thể nhấp vào video và nó sẽ mở ra dưới dạng hộp đèn của người xem. Nghĩ rằng nó khá tuyệt.

Có cách nào để áp dụng hoặc thay đổi CSS cho phần mô tả trên các mẫu khác nhau không? Tôi có một số nơi tôi đã phóng to phông chữ lớn hơn nhiều nhưng sau đó nó cũng tạo ra một phong bì thực sự lớn cho văn bản. Tôi chỉ muốn có thể giảm chiều cao của hộp mô tả.

Bạn có thể thay đổi kích thước phông chữ trong ứng dụng. Hộp tiêu đề sẽ mở rộng cùng với văn bản.

Tôi biết bạn có thể thay đổi kích thước phông chữ nhưng hộp chứa văn bản đó sẽ phát triển nhưng nó quá lớn và không có gì để kiểm soát điều đó trong các điều khiển của chương trình. Kết quả là bạn phải tìm tệp css và điều chỉnh nó ở đó, đây không phải là điều mà người dùng bình thường có thể làm được. Tại sao hộp lại quá lớn khi bạn chỉ hiển thị mô tả mà không hiển thị tiêu đề?

Tất cả các chủ đề đều có những điều chỉnh riêng. Chính xác thì chủ đề nào không phù hợp với bạn?

Một ý tưởng khác cho giao diện của chương trình là chỉ cần đặt một cửa sổ thông tin hiển thị vị trí của css khi sử dụng plugin wordpress...bây giờ có thể điều đó không cần thiết nhưng có thể là một ý tưởng. Quan trọng hơn là khả năng thực hiện các thay đổi và lưu nó trong các tệp dự án vì việc thay đổi css sẽ phải được thực hiện mỗi khi có bất kỳ thay đổi nào được thực hiện đối với dự án.

Cám ơn đã khuyên nhủ. Tôi đã gửi yêu cầu tới các nhà phát triển của chúng tôi. Xin lỗi, tôi không thể hứa với bạn rằng yêu cầu đó sẽ được triển khai. Vui lòng viết thư lại cho chúng tôi nếu bạn có thêm bất kỳ câu hỏi hoặc thắc mắc nào. Nhóm của chúng tôi luôn sẵn lòng giúp đỡ.

Có liên kết nào dành cho người dùng đã đăng ký để sử dụng không giới hạn không? Mình mới có bản 8.6 năm ngoái và thấy có bản 8.7 mới. Làm cách nào để nâng cấp?

Tất cả các nâng cấp đều miễn phí trong vòng một năm sau khi mua. Bạn có thể tải xuống phiên bản mới nhất của WOWSlider từ cùng một liên kết trong thông báo giấy phép của bạn. Sử dụng cùng một reg. chìa khóa.

Tôi đã tải xuống phiên bản mới nhất nhưng khi tôi nhấp vào Đăng ký thì nó lại chuyển đến trang web của bạn. Nó không mở cửa sổ đăng ký. Tôi đang cài đặt cái này trên một máy mới có windows 10. Đó có phải là vấn đề không....windows 10?

Bạn nên tải xuống phiên bản đầy đủ của WOWSlider.

Cảm ơn! Điều đó đã hiệu quả....không hiểu tại sao bản tải xuống đã lưu của tôi từ vài tuần trước lại không tải xuống khi đổi máy nhưng bản này thì có!! Và trên Windows 10. Sản phẩm tuyệt vời

Chúng tôi có một trang web với Weebly và muốn chèn thanh trượt của bạn trên một hoặc nhiều trang của chúng tôi. Bạn có tương thích với Weebly không? Chúng ta có tải nó xuống và chèn nó vào trang Weebly của mình không?

Vui lòng làm theo hướng dẫn sau để thêm WOWSlider vào Weebly:

Xin chào! Tôi muốn giới thiệu với bạn một biểu ngữ hoạt hình tuyệt đẹp cho một trang web sử dụng CSS3. Nó có thể được sử dụng làm thanh trượt trình bày sản phẩm hoặc dịch vụ trên trang chính của trang web. Đây không chỉ là thao tác cuộn các trang chiếu một cách sinh động: nó là sự xuất hiện từng bước của hình ảnh và văn bản trong trang chiếu. Đó là lý do tại sao tôi gọi nó là biểu ngữ động. Tập lệnh này không chỉ phức tạp để hình dung, khiến trang web của bạn đắt hơn mà còn dễ cài đặt trên trang web. Nó chứa một tệp js và một tệp css.

Bây giờ tôi sẽ mô tả chi tiết cách hoạt động của thanh trượt, sau đó tôi sẽ cho bạn biết cách cài đặt nó trên trang web và những điều bạn cần biết để thay đổi hình ảnh hoặc thay đổi động lực và cốt truyện của mỗi trang chiếu. Trước hết, tôi sẽ nói rằng tôi đã sửa đổi thanh trượt này khá nhiều, xóa nó khỏi một đống rác không cần thiết (dưới dạng hình ảnh, tệp css và js và mã không cần thiết). Thứ hai, tôi sẽ nói rằng thanh trượt hoạt hình này đã giúp tôi tạo một bài thuyết trình trên một trang web, nó tỏ ra khá tốt và hữu dụng. Biểu ngữ bao gồm bốn slide, chứa một số thông tin dưới dạng văn bản và hình ảnh. Từng hình ảnh, khối văn bản trượt mượt mà từ trên xuống dưới, phải hoặc trái và mỗi thành phần đều có thời điểm xuất hiện riêng. Và như vậy, bốn slide được hiển thị với các hình ảnh động khác nhau để để lại thông tin.

Từ điều hướng có các mũi tên để xem slide tiếp theo hoặc quay lại slide trước. Ngoài ra còn có các dấu đầu dòng mà bạn cũng có thể điều khiển biểu ngữ và chỉ báo thời gian thay đổi trang trình bày ở dạng vòng tròn có sọc đỏ chuyển động.

1. Tải xuống kho lưu trữ từ trang web của tôi bằng cách nhấp vào nút "Tải xuống"

2. Giải nén kho lưu trữ vào thư mục gốc của trang web của bạn

3. Chúng tôi viết đường dẫn đến tệp css và js trên trang nơi bạn sẽ đặt biểu ngữ này. Giữa và chèn đoạn mã sau:

jQuery(function() ( jQuery("#allinone_contentSlider_surprise").allinone_contentSlider(( skin: "bất ngờ", chiều rộng: 960, chiều cao: 384, autoHideBottomNav:false, showPreviewThumbs:false, autoHideNavArrows:false )); ));

Trong các dòng sau:

Bạn có thể xóa nó vì nó đang kết nối các phông chữ Latinh và rất có thể bạn sẽ có phông chữ tiếng Nga trong thanh trượt của mình

4. Dán mã này vào nơi bạn sẽ có thanh trượt:

Et harum quidem
rerum facilis Temporibus autem quibusdam et aut officiis debitis
aut rerum necessitatibus saepe Eveniet ut et voluptates Itaque Earum rerum hic tenetur a sapiente rerum facilis Lorem ipsum dolor sit amet, consectetur adipisicing elit Thống trị tiêu đề! Et harum quidem
rerum tạo điều kiện Iphone 3GS thiên hà S Iphone 4S

Thanh trượt đã sẵn sàng! Bây giờ hãy nói về việc quản lý nó và thay đổi các slide. Tôi sẽ chỉ cho bạn biết nó chịu trách nhiệm gì và chính bạn sẽ thử và thử nghiệm. Đừng quên rằng tất cả các số trong mã html được biểu diễn dưới dạng pixel và các phần tử được định vị tương ứng với cạnh trái và trên cùng.

data-initial-left - chịu trách nhiệm về vị trí mà khối tọa độ sẽ rời khỏi phía bên trái
data-initial-top - chịu trách nhiệm về vị trí tọa độ mà khối sẽ di chuyển từ phía trên
data-final-left - vị trí cuối cùng của phần tử trong thanh trượt, so với cạnh trái
data-final-top - vị trí cuối cùng của phần tử trong thanh trượt, so với phần trên cùng
data-duration - tốc độ hình ảnh hoặc văn bản sẽ xuất hiện
data-fade-start - độ trong suốt ở vị trí bắt đầu của phần tử (giá trị được biểu thị bằng phần trăm)
độ trễ dữ liệu - sau thời gian phần tử sẽ bắt đầu xuất hiện (tính bằng giây)

Đó là tất cả cho bây giờ! Xem bản demo của biểu ngữ hoặc thanh trượt hoạt hình tuyệt vời này cho một trang web sử dụng CSS3, tải xuống, tìm hiểu và tận hưởng! Chúc mọi người mọi điều tốt lành và tâm trạng tốt :))

Băng chuyền (từ băng chuyền tiếng Anh, còn gọi là “thanh trượt”, “trình chiếu”) rất phổ biến trên các trang web - đặc biệt là trên trang chính. Nhưng một băng chuyền được thiết kế không đúng cách chỉ có thể phá hỏng mọi thứ chứ không giúp ích được gì. Ví dụ: việc các biểu ngữ nhấp nháy nhanh gây khó chịu và khiến bạn muốn nhanh chóng rời khỏi trang web. Làm thế nào để khơi dậy sự quan tâm chứ không phải sự tức giận của du khách?

Hãy xem xét những điểm chính khi thiết kế thanh trượt.

nguyên tắc EDI

Tất cả các banner phải được biên soạn theo nguyên tắc EDP:

"O", hoặc đề nghị. Một đề nghị cụ thể cho khách hàng của bạn. Sản phẩm của bạn mang lại lợi ích gì?
"D", hoặc thời hạn. Giới hạn khuyến mãi của bạn (theo thời gian, số lượng hoặc giá cả)
“P” hoặc gọi hành động (mua, tìm hiểu thêm, v.v.)

Hãy nhớ: một biểu ngữ tốt chứa nhiều thông tin vừa đủ cho một cú nhấp chuột.

Chúng ta hãy xem xét kỹ hơn 3 lựa chọn về thời hạn:

1. Thời hạn

Một lựa chọn thường được sử dụng là giới hạn ưu đãi đặc biệt. Vấn đề là bạn đưa ra những điều kiện “ngon”. Và còn tuyệt vời hơn nếu chương trình khuyến mãi có hiệu lực trong 24 giờ hoặc 3-4 ngày. Khách truy cập càng có ít thời gian để suy nghĩ thì mức độ phản hồi đối với lời đề nghị của bạn càng cao.

2. Thay đổi giá

Hiển thị bao nhiêu thời gian còn lại để mua một sản phẩm hoặc dịch vụ ở mức giá tốt. Hãy để khách truy cập hiểu rằng trong N ngày giá của sản phẩm sẽ thay đổi và anh ta sẽ phải trả thêm bao nhiêu nếu không mua sản phẩm ngay bây giờ.

3. Giới hạn số lượng

Bạn cần cho khách hàng thấy rằng sản phẩm sắp hết. Ví dụ: “Chỉ còn 17 bản”. Để tăng thêm tác động, hãy chỉ ra rằng 5 trong số 17 chỗ đã được đặt trước. Tất cả điều này buộc người mua phải nhanh chóng đưa ra quyết định.

Ví dụ về các biểu ngữ bán hàng được tạo chính xác:

2-3 biểu ngữ trong một thanh trượt

Không cần phải tạo một số lượng lớn các biểu ngữ. Điều này là vô nghĩa vì người dùng không dành đủ thời gian trên trang chính để có thời gian xem tất cả các chương trình khuyến mãi của bạn. Thông thường, 2-3 câu đầu tiên sẽ nhận được sự chú ý của bạn nhiều nhất.

Thay vì một thanh trượt. Nó sẽ cho phép bạn ghi nhớ tốt hơn quảng cáo của mình mà không làm phiền khách truy cập bằng những hình ảnh nhấp nháy.

Nhưng nếu bạn muốn đặt 2-3 banner thì bạn nên cân nhắc những tính năng sau.

1. Tốc độ

Biểu ngữ không được xoay nhanh, nếu không người dùng sẽ không có đủ thời gian để xem ưu đãi mà mình quan tâm. Kết quả là anh ta sẽ cảm thấy lúng túng, buộc phải đợi biểu ngữ mình cần xuất hiện lại trên thanh trượt. Đừng làm cho khách hàng của bạn cảm thấy như họ không kiểm soát được tình hình - điều này rất khó chịu.

Tuy nhiên, nếu tốc độ quay tự động quá chậm sẽ gây ra tác dụng ngược lại. Người dùng sẽ cảm thấy mệt mỏi khi nhìn vào các thanh trượt mà họ ít quan tâm.

Vì vậy, hãy cố gắng tìm một nền tảng trung gian. Điều chỉnh tốc độ quay banner sao cho không nhanh nhưng cũng không chậm - vừa đủ để xem. Thông thường 5-7 giây là đủ, miễn là không có quá nhiều văn bản.

2. Trình tự biểu ngữ

Hầu hết người dùng sẽ không có thời gian để xem hết các banner trong thanh trượt, ngay cả khi bạn thiết lập tính năng xoay tự động. Họ chỉ không dành nhiều thời gian trên trang chủ. Thông thường, họ cuộn hoặc di chuyển đến một trang khác rất lâu trước khi tất cả các biểu ngữ được hiển thị.

Đây là lý do tại sao trình tự các câu trong thanh trượt lại quan trọng đến vậy. hơn tất cả những cái tiếp theo. Nếu nó không khiến người truy cập quan tâm thì khả năng cao là phần còn lại sẽ không được xem. Vì vậy, trình tự các biểu ngữ phải được suy nghĩ cẩn thận.

Như đã đề cập, việc quay vòng nhanh dẫn đến việc người dùng không có thời gian để xem ưu đãi. Do đó, quá trình xoay tự động phải tạm dừng khi biểu ngữ được lấy nét, tức là khi chuột di chuột qua biểu ngữ đó. Đồng thời, bạn cần cho khách truy cập thấy một cách trực quan rằng băng chuyền phản ứng với chuyển động của anh ta, để không đánh lừa anh ta rằng thanh trượt đã ngừng hoạt động.

Kể từ khi bắt đầu phát triển các biểu định kiểu xếp tầng của phiên bản thứ ba, khả năng của người thiết kế bố cục đã tăng lên theo cấp số nhân. Ngày càng có nhiều chức năng có thể được triển khai bằng CSS “thuần túy”. Công việc này đề xuất phát triển một thanh trượt tương tác mà không cần một dòng triển khai ECMAScript nào (ví dụ: JavaScript hoặc JScript - viết tắt là JS). Tự động xoay, lựa chọn tương tác bất kỳ trang chiếu nào với quá trình chuyển đổi mượt mà - tất cả điều này được triển khai trong CSS “thuần túy”.

Các thuộc tính chuyển tiếp, hoạt ảnh và biến đổi từ lâu đã được triển khai ở dạng này hay dạng khác trong tất cả các trình duyệt phổ biến. Vào ngày 6 tháng 6 năm 2012, tập đoàn W3C đã thông báo rằng phần này của tiêu chuẩn CSS 3.0 đang phát triển sẽ không thay đổi đáng kể và khuyến nghị tất cả các trình duyệt nên triển khai nó ngay hôm nay.

Đối với các nhà phát triển của tất cả các trình duyệt phổ biến, điều này có nghĩa là đã đến lúc loại bỏ tiền tố cho tên của các thuộc tính được chỉ định, vì bản thân các thuộc tính đó đã được triển khai và rất gần với tiêu chuẩn.

Đối với các nhà phát triển front-end, điều này có nghĩa là một tiêu chuẩn để xây dựng. Bây giờ bạn không cần phải sợ rằng trong tương lai một số trình duyệt sẽ từ bỏ thuộc tính không chuẩn của tiền tố - sau cùng, thuộc tính tiêu chuẩn sẽ được sao chép bởi thuộc tính tiêu chuẩn và sẽ thay thế nó nếu cần.

Các phiên bản Internet Explorer đã lỗi thời, sẽ sớm bao gồm cả phiên bản 9, không hỗ trợ chuyển đổi, hoạt ảnh và biến đổi dưới mọi hình thức. Nhưng tỷ trọng của chúng vẫn rất đáng kể và vượt quá 10%. Trong tác phẩm này, một "sơ khai" js được đề xuất cho chức năng chính cho IE7-9 và không có gì cho chức năng bổ sung - hiệu ứng chuyển đổi mượt mà giữa các trang trình bày, theo sự xuống cấp nhẹ nhàng. nguyên tắc.

Có nhiều nhiệm vụ có thể được giải quyết bằng CSS: phòng trưng bày tương tác, menu thả xuống nhiều cấp độ, xây dựng và tạo hoạt ảnh cho biểu đồ 3D... Câu hỏi: tại sao nên sử dụng CSS khi bạn có thể làm mọi thứ trong JS? Mọi người phải đưa ra câu trả lời của riêng mình, có tính đến các lập luận sau:

1. Trong hầu hết các trường hợp, hiệu ứng CSS hoạt động nhanh hơn vì việc thực thi chúng được giám sát độc quyền bởi các công cụ trình duyệt. Điều này đặc biệt đáng chú ý trên các thiết bị di động.

2. Để thực hiện nhiệm vụ, không cần có kiến ​​thức về JS hay bất kỳ ngôn ngữ lập trình nào. Chỉnh sửa CSS, theo quy định, thậm chí có sẵn cho người dùng bình thường. Hơn nữa, việc “phá vỡ mọi thứ” trong CSS khó hơn nhiều so với JS.

Vì vậy, để đặt tên cho các lớp CSS, phương pháp Block Element Modifier (BEM https://github.com/bem) đã được sử dụng. Điểm mấu chốt là bố cục dựa trên bố cục của trang từ các khối độc lập. Theo BEM, một khối có thể có các phần tử nhưng chỉ ở bên trong khối. Dưới đây là các lớp CSS cho công việc này:

Image-tape /* Khối chứa một băng hình ảnh */ .image-tape__radio /* Nút radio */ .image-tape__item /* Slide */ .image-tape__img /* Hình ảnh bên trong slide */ .image-tape__number-list /* Vùng chứa có các nút chuyển đổi */ .image-tape__number /* Một nút để chuyển đổi trang chiếu liên quan */ .image-tape__number-after /* được triển khai để hỗ trợ IE7 và IE8, không hỗ trợ giả :after và ::after -elements tương ứng */ .image- tape_count_X /* Công cụ sửa đổi xác định số lượng slide X */

Có rất nhiều thông tin trên Internet về việc sử dụng hoạt ảnh CSS, vì vậy chúng tôi sẽ hạn chế mô tả các tính năng của một cách triển khai cụ thể.

@keyframes image-tape__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% (opacity:0;) 100%(opacity:0;) )

Tính năng chính của việc triển khai thanh trượt là tất cả các trang trình bày và tất cả các nút đều được gán cùng một hoạt ảnh:

Image-tape_count_3 .image-tape__item, image-tape_count_3 .image-tape__number-after ( -moz-animation: image-tape__item-autoplay_count_3 15 giây vô hạn; -webkit-animation: image-tape__item-autoplay_count_3 15 giây vô hạn; -o-animation: hình ảnh -tape__item-autoplay_count_3 15 giây vô hạn; hình ảnh-tape__item-autoplay_count_3 15 giây vô hạn)

Cách tiếp cận này cho phép bạn giảm đáng kể số lượng mã, vì tất cả hoạt ảnh vẫn phải được sao chép bằng các phiên bản tiền tố (@-webkit-keyframes, @-moz-keyframes và @-o-keyframes) và mỗi “ngăn xếp” như vậy của quy định phải mô tả riêng cho từng số slide yêu cầu (do khách hàng). Nếu bạn mô tả hoạt ảnh riêng biệt cho từng slide thì lượng mã có thể lên tới hàng chục kilobyte.

Để tránh điều này, nhưng tạo hoạt ảnh tuần tự cho tất cả các trang chiếu và nút bằng cách sử dụng một hoạt ảnh, việc đặt khoảng thời gian bắt đầu hoạt ảnh kịp thời cho từng cặp slide + nút là đủ:

Băng hình ảnh__item:nth-of-type(2), .image-tape__number:nth-of-type(2) > .image-tape__number-after ( -moz-animation-delay:5s; -webkit-animation-delay: 5s; -o-animation-delay:5s; animation-tape__item:nth-of-type(3), .image-tape__number:nth-of-type(3) > .image-tape__number -after ( -moz-animation- độ trễ: 10 giây; -webkit-hoạt hình-độ trễ: 10 giây; -o-hoạt hình-độ trễ: 10 giây;

Đối với cặp đầu tiên, giá trị mặc định vẫn giữ nguyên - độ lệch bằng 0.

Điều quan trọng nữa là phần bù không phụ thuộc vào số lượng trang chiếu và có thể được mô tả một lần cho số lượng trang chiếu tối đa.

Kết quả là sự chuyển tiếp sinh động mượt mà giữa các trang chiếu trông như thế này:

Có một số "sự kiện" CSS chuyển đổi trạng thái của phần tử html. Nếu chúng ta nói về một cú nhấp chuột, thì đây là sự xuất hiện của các lớp giả: tiêu điểm, :target hoặc: được chọn trên một trong các thành phần trang. Lớp giả: tiêu điểm không thể có nhiều hơn một phần tử trên mỗi trang cùng một lúc; pseudo-class:target làm tắc nghẽn “lịch sử” của trình duyệt và yêu cầu sự hiện diện của thẻ “a”; Lớp giả: được kiểm tra ghi nhớ trạng thái trước khi rời khỏi trang, ngoài ra, trong trường hợp nút radio, nó là một công tắc riêng biệt khi chỉ có thể chọn một thành phần của một nhóm cụ thể - và đây là điều cần thiết.

Image-tape__radio (kiểu của nút radio không được chọn) .image-tape__radio:checked (kiểu của nút radio đã chọn)

Trong bộ chọn CSS dưới 4.0, bạn chỉ có thể chuyển đổi trạng thái của một phần tử tùy ý (ví dụ: độ mờ của trang chiếu) kết hợp với nút radio, sử dụng bộ chọn lân cận + và ~. Bạn có thể chuyển đổi cả kiểu của hàng xóm và kiểu của con cháu của hàng xóm, nhưng trong mọi trường hợp, hàng xóm phải được đặt sau nút radio.

/* Kiểu của slide đầu tiên ở trạng thái “không được chọn” */ .image-tape__radio:nth-of-type(1) ~ .image-tape__item:nth-of-type(1) ( opacity: 0.0; ) / * Kiểu của slide đầu tiên ở trạng thái “đã chọn” */ .image-tape__radio:nth-of-type(1):checked ~ .image-tape__item:nth-of-type(1) ( opacity: 1.0; )

Độ mờ của trang chiếu, vùng chứa hình ảnh, đã được chuyển đổi. Đây là một phương pháp phổ biến hơn so với việc chuyển đổi các thuộc tính hình ảnh, vì vùng chứa div, không giống như phần tử img trống, có thể chứa bất kỳ thông tin bổ sung nào (ví dụ: tiêu đề của trang chiếu hoặc mô tả có liên quan, bao gồm cả các liên kết).

Các slide có thuộc tính chuyển tiếp cho phép bạn chuyển đổi giữa chúng một cách trơn tru.

Băng hình ảnh__item ( -moz-transition: độ mờ 0,2s tuyến tính; -webkit-transition: độ mờ 0,2s tuyến tính; -o-transition: độ mờ 0,2s tuyến tính; chuyển tiếp: độ mờ 0,2s tuyến tính; )

Khi người dùng chọn bất kỳ slide nào, hoạt ảnh của tất cả các slide và nút phải dừng lại. Điều này là do mức độ ưu tiên của các giá trị thuộc tính của hoạt ảnh đang chạy luôn cao hơn tất cả các giá trị khác của cùng thuộc tính (bạn thậm chí có thể ghi đè các thuộc tính nội tuyến bằng!important).

Vì mỗi trang chiếu đều có hoạt ảnh, mặc dù có cấu trúc giống nhau và phải tắt hoạt ảnh của tất cả các trang chiếu (nếu không, ba trang chiếu sẽ tham gia vào quá trình chuyển đổi suôn sẻ), tất cả các nút radio phải được đặt trước trang chiếu đầu tiên.

... ...

Hơn nữa, tất cả các nút (nhãn nút radio) phải được nhóm thành một khối riêng biệt và được đặt sau các nút radio, nếu không có thể phát sinh vấn đề với việc định vị nhãn chung cho số lượng trang trình bày tùy ý.

Việc dừng hoạt ảnh của tất cả các slide và nút khi chọn bất kỳ slide nào được thiết lập như sau:

Image-tape__radio:checked ~ .image-tape__item, .image-tape__radio:checked ~ .image-tape__number-list > .image-tape__number-after ( độ mờ: 0,0; -moz-animation: none; -webkit-animation: none; -o-hoạt hình: không có; hoạt hình: không có)

Không thể tạo một thanh trượt chung cho bất kỳ số lượng trang trình bày nào, bởi vì mỗi số yêu cầu một “ngăn xếp” quy tắc hoạt ảnh CSS riêng. Mỗi “ngăn xếp” như vậy (nếu được mô tả) có thể được kết nối thông qua bộ sửa đổi khối băng hình ảnh:

Hình ảnh-băng_count_X

Để hỗ trợ một số trình duyệt cũ hơn, slide đầu tiên không có hiệu ứng động. Vì lý do này, vùng chứa hình ảnh đầu tiên luôn có độ mờ là 1,0. Một vấn đề nảy sinh: khi chuyển đổi trơn tru hai slide khác với nhau, slide đầu tiên sẽ chiếu qua (đây cũng có thể là nền của phần gốc của khối băng hình ảnh). Để loại bỏ hiệu ứng tỏa sáng, hãy đặt độ trễ chuyển tiếp cho tất cả các trang chiếu ngoại trừ trang đã chọn; đối với mục đã chọn, chỉ mục z được đặt lớn hơn tất cả các mục khác:

Băng hình ảnh__item ( độ mờ: 1,0; vị trí: tương đối; -moz-transition: độ mờ 0,0s tuyến tính 0,2s; -webkit-transition: độ mờ 0,0s tuyến tính 0,2s; -o-transition: độ mờ 0,0s tuyến tính 0,2s; chuyển tiếp: độ mờ 0,0 giây tuyến tính 0,2 giây; ) .image-tape__radio:nth-of-type(1):đã kiểm tra ~ .image-tape__item:nth-of-type(1), .image-tape__radio:nth-of-type(2 ):đã chọn ~ .image-tape__item:nth-of-type(2), .image-tape__radio:nth-of-type(3):đã chọn ~ .image-tape__item:nth-of-type(3), .image -tape__radio:nth-of-type(4):đã chọn ~ .image-tape__item:nth-of-type(4), .image-tape__radio:nth-of-type(5):đã chọn ~ .image-tape__item:nth -of-type(5)( -moz-transition: độ mờ 0,2s tuyến tính; -webkit-transition: độ mờ 0,2s tuyến tính; -o-transition: độ mờ 0,2s tuyến tính; chuyển tiếp: độ mờ 0,2s tuyến tính; chỉ số z: 6 ; )

Để đảm bảo rằng các trang trình bày không xung đột với các thành phần khác của trang web (ví dụ: chúng không chồng lên menu thả xuống có chỉ mục z nhỏ hơn hoặc bằng 6), chúng tôi tạo bối cảnh xếp chồng của riêng mình cho khối bằng cách thiết lập chỉ số z tối thiểu cần thiết cho khả năng hiển thị:

Băng hình ảnh ( z-index: 0; )

Bây giờ tất cả các thành phần của khối sẽ chỉ “xung đột” với nhau.

Tất cả CSS phải được thêm vào tab Kiểu CSS tùy chỉnh khi chỉnh sửa bất kỳ bố cục nào. Sau khi đặt lại bộ đệm của trình duyệt, mã này sẽ xuất hiện trên tất cả các trang của trang web. Tuy nhiên, một phần hoặc thậm chí toàn bộ CSS có thể được chèn trực tiếp vào mẫu imagetape.tpl trong thẻ kiểu. Điều này làm giảm kích thước của tệp CSS có trên mỗi trang của trang web, hoạt động trên tất cả các trình duyệt, hợp lệ trong html5 nếu có thuộc tính phạm vi và trong điều kiện bố cục trong các khối độc lập không ảnh hưởng đến các phần khác của trang.

Khi cố gắng xuất mã HTML được yêu cầu bằng mẫu imagetape.tpl, có hai vấn đề phát sinh:

1. 1. Trong bộ ảnh chứa mã html của một slide, không có bộ đếm (một biến lấy giá trị từ 1 đến số slide N), cần thiết để liên kết các nút radio và nhãn với nhau.

2. 2. Phải nhóm các nút radio trước tất cả các slide và nhãn sau tất cả các slide nhưng số lượng của chúng phải tương ứng rõ ràng với số lượng slide.

Trong các bộ có thể tái sử dụng, bộ đếm có thể được tổ chức như sau:

##setglobalvar @imagetape_radioid = (imagetape_radioid)?imagetape_radioid + 1:1##

Ở đây ký hiệu @ có nghĩa là có một biểu thức php ở bên phải của nó (không nên sử dụng quá thường xuyên). Tất cả mã php, không giống như các cấu trúc if-else-endif có điều kiện, được thực thi ở giai đoạn nhập mã html từ các bộ, do đó bộ đếm sẽ hoạt động.

Để nhóm danh sách các nhãn và nút radio, hãy sử dụng mã sau:

##setglobalvar @imagetape_radios = imagetape_radios . " "## ##setglobalvar @imagetape_labels = imagetape_labels . " "##

Kết quả là, chúng tôi nhận được mã html, đầu tiên chứa danh sách các nút radio, sau đó là danh sách các trang trình bày có biểu ngữ và sau đó là một khối có danh sách nhãn:

##imagetape_radios## ##imageset## ##imagetape_labels##

Ngay cả ngày nay, không cần kỹ năng lập trình và thư viện chuyên dụng, trước khi được tiêu chuẩn hóa lần cuối, CSS 3.0 vẫn cho phép bạn triển khai các chức năng phức tạp và thú vị. Thanh trượt tương tác được đề xuất hiện có đầy đủ chức năng cho 80% người dùng RuNet. Đối với hầu hết những người dùng còn lại, cụ thể là người dùng trình duyệt IE7-9, bạn có thể sử dụng “sơ khai” js để triển khai chức năng chính của thanh trượt.

3.0625 Xếp hạng 3.06 (16 Bình chọn)

Mô tả: Chương trình liên kết PROPELLERADS hoạt động trên toàn thế giới (bao gồm cả Nga). Họ cung cấp một số lượng lớn các định dạng quảng cáo, bao gồm quảng cáo nhấp chuột, biểu ngữ và quảng cáo video. Giá cả khá hợp lý, họ trả bằng đô la. Ngày nay, một số lượng lớn các trang web hợp tác với chương trình liên kết, chẳng hạn như sử dụng định dạng clickunder, có thể đạt tới 30 triệu lần nhấp mỗi ngày. Và đối với quảng cáo biểu ngữ - lên tới 200 triệu lượt hiển thị, với CTR trung bình là 2%.

Đăng ký: Đăng ký với Propellerads.com

5 bình luận

1 bình luận

6 bình luận

Mô tả: Trình bày quảng cáo teaser và banner. Họ chấp nhận các trang web có nội dung khiêu dâm. Họ trả từ 40 kopecks cho mỗi lần nhấp vào một đoạn giới thiệu.

Quy tắc tham gia: Từ 500 khách truy cập mỗi ngày. Lưu lượng truy cập từ Nga ít nhất là 60%. Có sẵn bộ đếm với số liệu thống kê mở (hoặc cung cấp mật khẩu). Các trang web lưu trữ miễn phí được chấp nhận theo quyết định của người điều hành.

Thanh toán: Thanh toán tối thiểu - 100 rúp, thanh toán theo yêu cầu 2 lần một tháng.

Đăng ký: Đăng ký với Adhub.ru

Mô tả: ADCASH là một mạng quảng cáo quốc tế lớn (công ty tuyển dụng khoảng 200 người ở 18 quốc gia) để kiếm tiền trên trang web thuộc bất kỳ chủ đề nào cũng như trên cổng video hoặc ứng dụng di động. Họ cung cấp một số lượng lớn các định dạng quảng cáo phổ biến nhất hiện nay cho phép bạn kiếm tiền từ cả lưu lượng truy cập web và thiết bị di động. Họ sử dụng công cụ riêng của mình để hiển thị quảng cáo phù hợp nhất. Có nhiều cách để bảo vệ bạn khỏi các trình chặn quảng cáo Adblock.

Nhà quảng cáo được cung cấp một số tùy chọn để trả tiền cho quảng cáo: mỗi lần nhấp CPC, mỗi lần hiển thị CPM, mỗi lượt xem video. Có cài đặt nhắm mục tiêu chi tiết: GEO, trình duyệt, hệ điều hành, sở thích của khán giả, từ khóa, nhắm mục tiêu lại.

Sự đăng ký: