Შექმნა Scrollable ინფორმაციის HTML5 და CSS3 გარეშე MARQUEE

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

იმ მიზეზთა ნაწილი, რომელიც არასოდეს ყოფილა ბრაუზერის მიერ სრულად შესრულებული, ძლიერი პირადი აზრით, იყო ის, რომ ვიზუალური ეფექტი ითვლება და ის არ უნდა იყოს განსაზღვრული HTML- ის მიერ, რომელიც განსაზღვრავს სტრუქტურას. ამის ნაცვლად, ვიზუალური ან პრეზენტაციის ეფექტურობა უნდა გაიმართოს CSS- ით. და CSS3 დასძენს Marquee მოდულის გაკონტროლება, თუ როგორ ბრაუზერები დაამატოთ marquee ეფექტი ელემენტებს.

ახალი CSS3 თვისებები

CSS3 დასძენს ხუთი ახალი თვისებები, რათა დაეხმაროს კონტროლი როგორ თქვენი შინაარსის მონიტორები Marquee: overflow სტილის, Marquee სტილის, marquee-play- რაოდენობა, მარკუს-მიმართულებით და მარკუს-სიჩქარე.

overflow სტილის
Overflow სტილის ქონება (რომელიც მე ასევე განიხილეს სტატიაში CSS Overflow) განსაზღვრავს სასურველი სტილი შინაარსი, რომ overflows შინაარსი ყუთში. თუ მარკირების ხაზის ან მარკირების ბლოკირების მნიშვნელობას მიანიჭებთ, კონტენტი slide- ს და მარცხნივ / მარჯვნივ (მარკუს-ხაზის) ან ქვემოთ (ქვემოთ).

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

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

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

მარკე-პიესა-დათვლა
MARQUEE- ის ელემენტის გამოყენების ერთ-ერთი პრობლემა ისაა, რომ მარკიკი არასდროს შეჩერდება. მაგრამ სტილის საკუთრების მარკე-პიესა-დათვლათ შეგიძლიათ შეიტანოთ მარიკა, რათა შეამოწმოთ შინაარსი და გამორთვა კონკრეტული დროისთვის.

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

Marquee- მიმართულების დეტალები

overflow სტილის ენის მიმართულება წინ გადახედვა
მარკიკ-ხაზი ltr მარცხენა უფლება
rtl უფლება მარცხენა
მარკეს ბლოკი up ქვემოთ

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

მარკვის თვისებების ბროუზერი მხარდაჭერა

თქვენ უნდა გამოვიყენოთ გამყიდველი პრეფიქსი და გამოიყენოთ CSS- ის მარკეტინგული ელემენტების მუშაობა. ისინი არიან:

CSS3 გამყიდველი პრეფიქსი
overflow-x: marquee-line; overflow-x: -webkit-marquee;
მარკეს სტილით -ვებრი-მარკეს სტილის
მარკე-პიესა-დათვლა -ვიბიტი-მარკიკი-განმეორება
მარკირების მიმართულებით: წინგადადგმული ნაბიჯი; -ვიბიტი-მარკირების მიმართულებით: წინგადადგმული ნაბიჯები;
მარკ-სიჩქარე -ვიბიტი-მარკ-სიჩქარე
არ ექვივალენტურია -ვიბიტი-მარკესი-ნამატი

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

იმისათვის, რომ გქონდეთ თქვენი მარკეტინგული სამუშაოები, უნდა მოათავსოთ გამყიდველი წინასწარ ღირებულებები პირველ რიგში და მიჰყევით მათ CSS3 სპეციფიკაციის ღირებულებებს. მაგალითად, აქ არის CSS for Marquee რომ scrolls ტექსტი ხუთჯერ მარცხნიდან მარჯვნივ 200x50 ყუთში.

{
სიგანე: 200px; სიმაღლე: 50px; თეთრი სივრცე: nowrap;
overflow: ფარული;
overflow-x: -webkit-marquee;
-ვიბიტი-მარკირების მიმართულებით: წინსვლა;
-ვიბიტი-მარკუე-სტილი: გადახვევა;
-ვიკიტ-მარკ-სიჩქარე: ნორმალური;
-ვიბიტი-მარკიკ-ნამატი: მცირე;
-ვიბიტი-მარკიკ-განმეორება: 5;
overflow-x: marquee-line;
მარკირების მიმართულებით: წინ;
მარკვის სტილის: გადახვევა;
მარკირების სიჩქარე: ნორმალური;
მარკე-პიესა-რაოდენობა: 5;
}