
Size: a a a
menu_link = New Link
. При наведении на блок должен срабатывать hover. Также блок должен повторяться в цикле 5 раз и в каждом отдельном блоке должен быть разный текст.Utils.insertCSS("@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';")
yellow = new Color("fac112")
white = new Color("FFFFFF")
black = new Color("000000")
blackShadow = new Color("rgba(0,0,0,0.1)")
blackShadow
дополнительно хранит в себе свойства альфа-канала (прозрачности). Я решил записать цвета в переменны по нескольким причинам.curveSpring = "spring(300,20,50)"
bg = new BackgroundLayer
backgroundColor: yellow
buttons = []
words = ["Index 0", "Index 1", "Index 2", "Index 3", "Index 4"]
buttons
— пустой и нужен для того, чтобы хранить блоки из цикла. А вот массив words
сразу же содержит в себе текст, который будет выводиться внутри блоков.for...in
. Отдельные его куски я разберу чуть ниже, чтобы сейчас не потерялась разметка.for i in [0..4]
buttons[i] = new Layer
width: 256
height: 64
x: Align.center
y: 100 + i * 100
borderRadius: 3
backgroundColor: white
animationOptions:
curve: curveSpring
title = new TextLayer
text: Utils.randomChoice(words)
parent: buttons[i]
fontFamily: "17px Roboto"
color: black
textAlign: "center"
title.center()
buttons[i].states.a =
scale: 1.2
shadowY: 5
shadowColor: blackShadow
shadowBlur: 10
buttons[i].states.b =
scale: 1
shadowY: 0
shadowColor: blackShadow
shadowBlur: 0
buttons[i].onMouseOver (event, layer) ->
layer.states.next("a")
buttons[i].onMouseOut (event, layer) ->
layer.states.next("b")
for i in [0..4]
buttons
: buttons[i] = new Layer
width: 256
height: 64
x: Align.center
y: 100 + i * 100
borderRadius: 3
backgroundColor: white
animationOptions:
curve: curveSpring
buttons[i] = new Layer
— теперь это новая переменная с блоками из массива. Более того, не нужно даже писать что-нибудь вроде buttons.push block
, чтобы блоки отправились в массив. Всё делается автоматически.y: 100 + i * 100
— делает отступ от каждого последующего блока в 100px.title = new TextLayer
text: Utils.randomChoice(words)
parent: buttons[i]
fontFamily: "17px Roboto"
color: black
textAlign: "center"
title.center()
parent: buttons[i]
— здесь назначается родительский объект. Это нужно для того, чтобы текст всегда был внутри блока и дублировался вместе с итерациями цикла.text: Utils.randomChoice(words)
— случайным образом извлекает индекс из массива. Таким образом, на каждом блоке будет разный текст. Если перезагружать страницу с прототипом, то можно заметить, как меняется текст на одном и том же блоке.states
: buttons[i].states.a =
scale: 1.2
shadowY: 5
shadowColor: blackShadow
shadowBlur: 10
buttons[i].states.b =
scale: 1
shadowY: 0
shadowColor: blackShadow
shadowBlur: 0
states.a
— отвечает за hover на блок. states.b
— отвечает за то, когда курсор убрали с блока. buttons[i].onMouseOver (event, layer) ->
layer.states.next("a")
buttons[i].onMouseOut (event, layer) ->
layer.states.next("b")
onMouseOver
— обрабатывает hover, а onMouseOut
— обрабатывает событие, когда курсор убрали с блока.